JavaScript DOM insertBefore ne fonctionne pas correctement

Question

C'est ma première question ici, alors pardonnez-moi pour mes éventuelles erreurs.

J'essaie d'ajouter des lignes à un tableau par le biais de JavaScript. La nouvelle ligne doit être ajoutée à l'avant-dernière position, la dernière ligne contient le bouton qui crée la nouvelle ligne. La dernière rangée a l'id "submitrow", mais récupérer cet élément et le passer à insertBefore ne fonctionne pas. Passer lastChild comme 2ème paramètre à insertBefore se comporte également de manière étrange.

Dans le corps, c'est la forme :

<form>
    <input type="hidden" name="submit_done" value="true" />
    <table id="formtable">
        <tr>
            <td>Number : </td>
            <td><input type="text" name="num[]" /></td>
        </tr>
        <tr id="submitrow">
            <td><input type="button" value="Add one more" onclick="addRow()" /></td>
            <td><input type="submit" value="Go!" /></td>
        </tr>
    </table>
</form>

Voici la fonction JavaScript :

function addRow(){
    var new_tr  = document.createElement('tr');
    var new_td1     = document.createElement('td');
    var new_td2     = document.createElement('td');
    var new_input   = document.createElement('input');

    new_td1.innerHTML = 'Number : ';

    new_input.type = 'text';
    new_input.name = 'num[]';
    new_td2.appendChild(new_input);

    new_tr.appendChild(new_td2);
    new_tr.insertBefore(new_td1, new_td2);

    var formtable   = document.getElementById('formtable');
    var submitrow   = document.getElementById('submitrow');
    submitrow.style.backgroundColor='red'; /*Works fine, paints button row red*/
    formtable.insertBefore(new_tr, submitrow); /*fails, invalid argument*/
}

Maintenant, le problème est :

1. insertBefore échoue sur la dernière ligne. Veuillez noter que insertBefore a été essayé sur l'objet new_tr également, et qu'il fonctionne bien. Ainsi, le seul argument invalide possible est submitRow, qui est peint en rouge avec succès juste une ligne au-dessus de la déclaration d'échec.

2. Si pour l'appel défaillant, au lieu de submitrow si formtable.lastChild est utilisé, il fonctionne. Mais d'une manière ou d'une autre, ce lastChild inclut aussi la ligne supérieure. Cela signifie que si je mets disons 4 rangées supplémentaires et que j'entre 1, 2, 3, 4, 5 dans les entrées de test, et que si vous appuyez sur le bouton "Add one more", une rangée est ajoutée entre 4 et 5 !

J'ai beaucoup essayé de le raisonner, mais je n'ai trouvé aucune logique derrière ces deux situations.

Dans l'espoir d'une solution, je vous remercie tous,

Abhay Bhave, Inde

Answer 1

Le titre devrait être changé en "JavaScript DOM insertBefore isn't". utilisé correctement".

C'est parce que, même si vous n'avez pas mis votre DOM, le navigateur crée automatiquement un fichier de type <tbody> qui englobe les lignes du tableau. Ainsi, il arrive que #formtable es no le parent de #submitrow et c'est pourquoi vous obtenez une erreur.

Essayez ça :

formtable.tBodies[0].insertBefore(new_tr, submitrow);

Ou, plus généralement :

submitrow.parentNode.insertBefore(new_tr, submitrow);

(Dans les navigateurs qui le supportent, il y a même celui-ci :

submitrow.insertAdjacentElement("beforeBegin", new_tr);

Internet Explorer, Chrome, Safari et Opera le prennent en charge, Firefox ne le fait pas mais on peut facilement le caler. Je ne recommande pas d'utiliser ce genre de choses, de toute façon).

Et, comme un conseil général, toujours utiliser le <tbody> lors de l'écriture de tableaux :

<table id="formtable">
    <tbody>
        <tr>
            <td>Number : </td>
            <td><input type="text" name="num[]" /></td>
        </tr>
        <tr id="submitrow">
            <td><input type="button" value="Add one more" onclick="addRow()" /></td>
            <td><input type="submit" value="Go!" /></td>
        </tr>
    </tbody>
</table>

Et, bien sûr, <thead> y <tfoot> quand vous en avez besoin.