...">
Best IT Recipes

How to insert a row into the body of an HTML table in JavaScript

I have an HTML table with a header and footer:

<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>

I am trying to add a line to tbody with the following:

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

but the line is added to the tfoot section.

How do i insert tbody ?

+110
javascript html html-table insert table row
Aug 20 '13 at 11:05
source share
9 answers

If you want to add a line to tbody , get a link to it and add it there.

 var tableRef = document.getElementById('myTable').getElementsByTagName('tbody')[0]; // Insert a row in the table at the last row var newRow = tableRef.insertRow(); // 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);

The working demo is here . You can also check the insertRow documentation here .

+181
Aug 20 '13 at 11:20
source share

You can try the following snippet using jquery .

 $(table).find('tbody').append( "<tr><td>aaaa</td></tr>" );
+22
Aug 20 '13 at 11:13
source share

The main approach:

This should add html-formatted content and show the new line added.

 var myHtmlContent = "<h3>hello</h3>" var tableRef = document.getElementById('myTable').getElementsByTagName('tbody')[0]; var newRow = tableRef.insertRow(tableRef.rows.length); newRow.innerHTML = myHtmlContent;
+9
Dec 08 '17 at 20:02 on
source share

You are close, just add a line to tbody instead of table :

 myTbody.insertRow();

Just get a link to tBody ( myTbody ) before using. Please note that you do not need to skip the last position in the table, it is automatically positioned at the end when you skip the argument.

Live demo on jsFiddle .

+8
Aug 20 '13 at 11:25
source share

I think this is the script that you need

 var t = document.getElementById('myTable'); var r =document.createElement('TR'); t.tBodies[0].appendChild(r)
+5
Aug 20 '13 at 11:18
source share

add lines

 <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>

and cells

+3
Mar 10 '16 at 6:53
source share

I tried this

it works for me

 var table=document.getElementById("myTable"); var row=table.insertRow(myTable.rows.length-2); var cell1=row.insertCell(0);
+2
Aug 20 '13 at 11:23
source share

You can use the following example

 <table id="purches"> <thead> <tr> <th>ID</th> <th>Transaction Date</th> <th>Category</th> <th>Transaction Amount</th> <th>Offer</th> </tr> </thead> <!-- <tr th:each="person : ${list}" > <td><li th:each="person : ${list}" th:text="|${person.description}|"></li></td> <td><li th:each="person : ${list}" th:text="|${person.price}|"></li></td> <td><li th:each="person : ${list}" th:text="|${person.available}|"></li></td> <td><li th:each="person : ${list}" th:text="|${person.from}|"></li></td> </tr> --> <tbody id="feedback"> </tbody> </table>

Js file:

  $.ajax({ type: "POST", contentType: "application/json", url: "/search", data: JSON.stringify(search), dataType: 'json', cache: false, timeout: 600000, success: function (data) { // var json = "<h4>Ajax Response</h4><pre>" + JSON.stringify(data, null, 4) + "</pre>"; // $('#feedback').html(json); // console.log("SUCCESS : ", data); //$("#btn-search").prop("disabled", false); for (var i = 0; i < data.length; i++) { // $("#feedback").append('<tr><td>' + data[i].accountNumber + '</td><td>' + data[i].category + '</td><td>' + data[i].ssn +'</td></tr>'); $('#feedback').append('<tr><td>' + data[i].accountNumber + '</td><td>' + data[i].category + '</td><td>' + data[i].ssn +'</td><td>' + data[i].ssn +'</td><td>' + data[i].ssn +'</td></tr>'); alert(data[i].accountNumber) } }, error: function (e) { var json = "<h4>Ajax Response</h4><pre>" + e.responseText + "</pre>"; $('#feedback').html(json); console.log("ERROR : ", e); $("#btn-search").prop("disabled", false); } });
+1
May 12 '18 at 20:15
source share

I think this is the best way to add a row to the table:

 function myFunction() { var table = document.getElementById("myTable"); var row = table.insertRow(0); }
0
Apr 04 '18 at 3:32
source share


More articles:


All Articles