I have an HTML table with a header and a footer:
<table> <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 row in tbody with the following:
myTable.insertRow(myTable.rows.length - 1); but the row is added in the tfoot section.
How do I insert tbody?
12 Answers
If you want to add a row into the tbody, get a reference to it and call its insertRow method.
var tbodyRef = document.getElementById('myTable').getElementsByTagName('tbody')[0]; // Insert a row at the end of table var newRow = tbodyRef.insertRow(); // Insert a cell at the end of the row var newCell = newRow.insertCell(); // Append a text node to the cell var newText = document.createTextNode('new row'); newCell.appendChild(newText);<table> <thead> <tr> <th>My Header</th> </tr> </thead> <tbody> <tr> <td>initial row</td> </tr> </tbody> <tfoot> <tr> <td>My Footer</td> </tr> </tfoot> </table>(old demo on JSFiddle)
8You can try the following snippet using jQuery:
$(table).find('tbody').append("<tr><td>aaaa</td></tr>"); Basic approach:
This should add HTML-formatted content and show the newly added row.
var myHtmlContent = "<h3>hello</h3>" var tableRef = document.getElementById('myTable').getElementsByTagName('tbody')[0]; var newRow = tableRef.insertRow(tableRef.rows.length); newRow.innerHTML = myHtmlContent; You're close. Just add the row to the tbody instead of table:
myTbody.insertRow(); Just get a reference to tBody (myTbody) before use. Notice that you don't need to pass the last position in a table; it's automatically positioned at the end when omitting argument.
I think this script is what exactly you need
var t = document.getElementById('myTable'); var r =document.createElement('TR'); t.tBodies[0].appendChild(r) Add rows:
<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 = " "; for (var c=0, m=l; c < m; c++) { table.rows[0].insertCell(c); table.rows[0].cells[c].innerHTML = " "; } } 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 = " "; } } 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> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> </table> </body> </html>And cells.
1Add Column, Add Row, Delete Column, Delete Row. Simplest way
function addColumn(myTable) { var table = document.getElementById(myTable); var row = table.getElementsByTagName('tr'); for(i=0;i<row.length;i++){ row[i].innerHTML = row[i].innerHTML + '<td></td>'; } } function deleterow(tblId) { var table = document.getElementById(tblId); var row = table.getElementsByTagName('tr'); if(row.length!='1'){ row[row.length - 1].outerHTML=''; } } function deleteColumn(tblId) { var allRows = document.getElementById(tblId).rows; for (var i=0; i<allRows.length; i++) { if (allRows[i].cells.length > 1) { allRows[i].deleteCell(-1); } } } function myFunction(myTable) { var table = document.getElementById(myTable); var row = table.getElementsByTagName('tr'); var row = row[row.length-1].outerHTML; table.innerHTML = table.innerHTML + row; var row = table.getElementsByTagName('tr'); var row = row[row.length-1].getElementsByTagName('td'); for(i=0;i<row.length;i++){ row[i].innerHTML = ''; } } table, td { border: 1px solid black; border-collapse:collapse; } td { cursor:text; padding:10px; } td:empty:after{ content:"Type here..."; color:#cccccc; } <!DOCTYPE html> <html> <head> </head> <body> <form> <p> <input type="button" value="+Column" onclick="addColumn('tblSample')"> <input type="button" value="-Column" onclick="deleteColumn('tblSample')"> <input type="button" value="+Row" onclick="myFunction('tblSample')"> <input type="button" value="-Row" onclick="deleterow('tblSample')"> </p> <table contenteditable><tr><td></td></tr></table> </form> </body> </html>let myTable = document.getElementById('myTable').getElementsByTagName('tbody')[0]; let row = myTable.insertRow(); let cell1 = row.insertCell(0); let cell2 = row.insertCell(1); let cell3 = row.insertCell(2); cell1.innerHTML = 1; cell2.innerHTML = 'JAHID'; cell3.innerHTML = 23; row = myTable.insertRow(); cell1 = row.insertCell(0); cell2 = row.insertCell(1); cell3 = row.insertCell(2); cell1.innerHTML = 2; cell2.innerHTML = 'HOSSAIIN'; cell3.innerHTML = 50;table { border-collapse: collapse; } td, th { border: 1px solid #000; padding: 10px; }<table> <thead> <tr> <th>ID</th> <th>NAME</th> <th>AGE</th> </tr> </thead> <tbody></tbody> </table>You can also use querySelector to select the tbody, then insert a new row at the end of it.
Use append to insert Node or DOMString objects to a new cell, which will then be inserted into the new row.
var myTbody = document.querySelector("#myTable>tbody"); var newRow = myTbody.insertRow(); newRow.insertCell().append("New data");<table> <thead> <tr> <th>My Header</th> </tr> </thead> <tbody> <tr> <td>Data</td> </tr> </tbody> <tfoot> <tr> <td>My footer</td> </tr> </tfoot> </table>I have tried this, and this is working for me:
var table = document.getElementById("myTable"); var row = table.insertRow(myTable.rows.length-2); var cell1 = row.insertCell(0); You can use the following example:
<table> <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> </tbody> </table> JavaScript 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); } }); <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <link rel="stylesheet" type="text/css" href="css/style.css" /> <title>Expense Tracker</title> </head> <body> <h1>Expense Tracker</h1> <div> <label for="name">Name:</label> <input type="text" name="myInput" placeholder="Name of expense" size="50" /><br /><br /> <label for="date">Date:</label> <input type="date" name="myDate" /> <label for="amount">Amount:</label> <input type="text" name="myAmount" placeholder="Dollar amount ($)" /><br /><br /> <span onclick="addRow()">Add Expense</span> </div> <br /> <input type="button" value="Add Rows" onclick="addRows()" /> <!-- Optional position --> <table> <tr> <th>Name</th> <th>Date</th> <th>Amount</th> <th>Delete</th> </tr> <tr> <td>McDonald's</td> <td>6/22/2017</td> <td>$12.00</td> <td> <input type="button" value="Delete" onclick="deleteRow(this)" /> </td> </tr> </table> <script> function deleteRow(r) { var i = r.parentNode.parentNode.rowIndex; document.getElementById("myTable").deleteRow(i); } function addRows() { console.log("add rows"); document.getElementById("myTable").innerHTML += `<tr> <td>McDonald's</td> <td>6/22/2017</td> <td>$12.00</td> <td> <input type="button" value="Delete" onclick="deleteRow(this)" /> </td> </tr>`; } </script> </body> </html> 
