Comment insérer une ligne dans un corps de table HTML en javascript?

J'ai une table HTML avec un en-tête et un pied de page:

<table id="myTable"> <thead> <tr> <th>My Header</th> </tr> </thead> <tbody> <tr> <td>aaaaa</td> </tr> </tbody> <tfoot> <tr> <td>My footer</td> </tr> <tfoot> </table>

J'essaie d'ajouter une ligne dans tbody avec ce qui suit:

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

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

Comment l'insérer tbody ?

Si vous souhaitez ajouter une ligne dans le tbody , obtenez une référence et ajoutez-la.

 var tableRef = document.getElementById('myTable').getElementsByTagName('tbody')[0]; // Insert a row in the table at the last row var newRow = tableRef.insertRow(tableRef.rows.length); // Insert a cell in the row at index 0 var newCell = newRow.insertCell(0); // Append a text node to the cell var newText = document.createTextNode('New row'); newCell.appendChild(newText);

Une démonstration de travail ici . Aussi, vous pouvez vérifier la documentation d' insertRow ici .

Vous êtes proche, il suffit d'ajouter la ligne au tbody au lieu de la table :

 myTbody.insertRow();

Il suffit d'obtenir une référence à tBody ( myTbody ) avant utilisation. Notez que vous n'avez pas besoin de passer la dernière position dans une table, elle est automatiquement positionnée à la fin lorsque vous omettez l'argument.

Une démonstration en direct à jsFiddle .

U peut essayer ceci en utilisant Jquery.

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

J'ai essayé cela,

Ça fonctionne pour moi

 var table=document.getElementById("myTable"); var row=table.insertRow(myTable.rows.length-2); var cell1=row.insertCell(0);

Je pense que ce script est ce que vous avez besoin exactement

 var t = document.getElementById('myTable'); var r =document.createElement('TR'); t.tBodies[0].appendChild(r)

Ajouter des lignes

 <html> <script> function addRow(){ var table = document.getElementById('myTable'); //var row = document.getElementById("myTable"); var x = table.insertRow(0); var e =table.rows.length-1; var l =table.rows[e].cells.length; //x.innerHTML = "&nbsp;"; for (var c =0, m=l; c < m; c++) { table.rows[0].insertCell(c); table.rows[0].cells[c].innerHTML = "&nbsp;&nbsp;"; } } function addColumn(){ var table = document.getElementById('myTable'); for (var r = 0, n = table.rows.length; r < n; r++) { table.rows[r].insertCell(0); table.rows[r].cells[0].innerHTML = "&nbsp;&nbsp;" ; } } function deleteRow() { document.getElementById("myTable").deleteRow(0); } function deleteColumn() { // var row = document.getElementById("myRow"); var table = document.getElementById('myTable'); for (var r = 0, n = table.rows.length; r < n; r++) { table.rows[r].deleteCell(0);//var table handle } } </script> <body> <input type="button" value="row +" onClick="addRow()" border=0 style='cursor:hand'> <input type="button" value="row -" onClick='deleteRow()' border=0 style='cursor:hand'> <input type="button" value="column +" onClick="addColumn()" border=0 style='cursor:hand'> <input type="button" value="column -" onClick='deleteColumn()' border=0 style='cursor:hand'> <table id='myTable' border=1 cellpadding=0 cellspacing=0> <tr id='myRow'> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> </table> </body> </html>