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.
-
peirix: you are right, here it is " Maybe this post helps stackoverflow.com/questions/171027/jquery-add-table-row" "ant– ant2009-11-13 10:19:04 +00:00Commented Nov 13, 2009 at 10:19
Add a comment
|
3 Answers
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>
3 Comments
Harvey Lin
Does the cloned row also includes all web component that utilizes shadow Dom within the table cells?
AmbrosiaDevelopments
Shadow DOM is not copied (just like non-inline event handlers etc). You can test this yourself by adding
row.attachShadow({mode:'open'}) right before the call to clone the node and inspecting with browser Dev Tools. Keep in mind I answered this question 10 years ago. I'd say there are better ways to go about this now.Harvey Lin
Ok thanks for checking back in my comments! What would you suggest to copy table cells that have shadow Dom within?
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
I Know Its an old post but I feel the following code can help other readers
$("button").click(function () {
$("#DataRow").clone().appendTo("#mainTable");
});
3 Comments
Mark Schultheiss
Note as it stands, this does not copy the event handlers in the clone. api.jquery.com/clone Also, this fails to fix the duplicate id issue and thus produces invalid HTML
OXiGEN
@MarkSchultheiss event handlers will work just fine if they're delegated to an element higher than what is being copied (in this case, to the
tbody or higher up). As for duplicate ids, you can use id counters that sit apart from the item being copied and react to the event trigger to apply the correct ids to the copied nodes.Mark Schultheiss
@OXiGEN - I know all that yes, my points still stand this does NOT do that. i.e.
.clone(true) in the reference I cited