Ajouter une ligne à un tableau HTML en Javascript

Programmation JavaScript
, , , , ,
1

J’ai un tableau HTML avec un header et un footer:

<table id="testTable">
    <thead>
        <tr>
            <th>My Header</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Lorem Ipsum</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>My footer</td>
        </tr>
    <tfoot>
</table>

J’essaie d’ajouter une ligne dans tbody avec le code suivant:

testTable.insertRow(testTable.rows.length - 1);

mais la ligne est ajoutée dans la section tfoot.

Comment puis-je insérer la ligne dans tbody?

2

Si vous voulez ajouter une ligne dans le tbody, récupérez une référence à celui-ci et appelez sa méthode insertRow.

var reff = document.getElementById('testTable').getElementsByTagName('tbody')[0];

// Insérer une ligne à la fin du tableau
var row = reff.insertRow();

// Insérer une cellule à la fin de la ligne
var cell = row.insertCell();

// Ajouter un texte à la cellule
var txt = document.createTextNode('Welcome To WayToLearnX!');
cell.appendChild(txt);
3

Vous pouvez essayer le code suivant en utilisant jQuery :

$(table).find('tbody').append("<tr><td>Nouvelle ligne!</td></tr>");