Create clone of table row and append to table in JavaScript
Question
In JavaScript, how can I add a row dynamically to a table? On a JavaScript event I want to create a similar row and append to the table.
3 answers
solution1
39 ACCPTED 2009-11-13 11:09:15
If you don't wish to use jQuery, there are a couple of simple functions you could use, like cloneNode() , createElement() and appendChild() . Here is a simple demonstration that appends a row to the end of the table using either the clone or create method. Tested in IE8 and FF3.5.
<html> <head> <script type="text/javascript"> function cloneRow() { var row = document.getElementById("rowToClone"); // find row to copy var table = document.getElementById("tableToModify"); // find table to append to var clone = row.cloneNode(true); // copy children too clone.id = "newID"; // change id or other attributes/contents table.appendChild(clone); // add new row to end of table } function createRow() { var row = document.createElement('tr'); // create row node var col = document.createElement('td'); // create column node var col2 = document.createElement('td'); // create second column node row.appendChild(col); // append first column to row row.appendChild(col2); // append second column to row col.innerHTML = "qwe"; // put data in first column col2.innerHTML = "rty"; // put data in second column var table = document.getElementById("tableToModify"); // find table to append to table.appendChild(row); // append row to table } </script> </head> <body> <input type="button" onclick="cloneRow()" value="Clone Row" /> <input type="button" onclick="createRow()" value="Create Row" /> <table> <tbody id="tableToModify"> <tr id="rowToClone"> <td>foo</td> <td>bar</td> </tr> </tbody> </table> </body> </html>
solution2
12 2012-10-27 14:20:36
tried all sorts of searches today, made use of sources : http://www.mredkj.com/tutorials/tablebasics3.html and http://www.mredkj.com/tutorials/tableaddcolumn.html
here's the result of my logic research, it's working now
function addRow(id)
{ var x=document.getElementById(id).tBodies[0]; //get the table
var node=t.rows[0].cloneNode(true); //clone the previous node or row
x.appendChild(node); //add the node or row to the table
}
function delRow(id)
{ var x=document.getElementById(id).tBodies[0]; //get the table
x.deleteRow(1); //delete the last row
}
NOTE1: my table contained a cell that had a textbox + a label in it per table row(tr).
NOTE2: in a row, there were multiple (td)'s that had a label + textbox
solution3
4
I Know Its an old post but I feel the following code can help other readers
$("button").click(function () {
$("#DataRow").clone().appendTo("#mainTable");
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.