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.

peirix: you are right, here it is " Maybe this post helps http://stackoverflow.com/questions/171027/jquery-add-table-row" " — ant, Nov 13 '09 at 10:19

score 58 · Accepted Answer · edited Jul 14 '15 at 17:27

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>

Does the cloned row also includes all web component that utilizes shadow Dom within the table cells? — Harvey Lin, Feb 21 '19 at 22:50
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. — AmbrosiaDevelopments, Feb 22 '19 at 03:56
Ok thanks for checking back in my comments! What would you suggest to copy table cells that have shadow Dom within? — Harvey Lin, Feb 22 '19 at 19:23

score 20 · Answer 2 · edited Oct 27 '12 at 14:42

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'd correct the ```node``` from ```t``` to ```x```, as this maay be confusing for who's learning at first. :) — onit, Oct 13 '22 at 13:58

score 8 · Answer 3 · answered Oct 01 '16 at 17:23

8

I Know Its an old post but I feel the following code can help other readers

  $("button").click(function () {
                $("#DataRow").clone().appendTo("#mainTable");
            });

answered Oct 01 '16 at 17:23

Note as it stands, this does not copy the event handlers in the clone. https://api.jquery.com/clone/ Also, this fails to fix the duplicate id issue and thus produces invalid HTML – Mark Schultheiss Oct 05 '18 at 20:04
@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. – OXiGEN Dec 01 '20 at 08:49
@OXiGEN - I know all that yes, my points still stand this does NOT do that. i.e. `.clone(true)` in the reference I cited – Mark Schultheiss Dec 02 '20 at 13:26

Create clone of table row and append to table in JavaScript

3 Answers3

Linked

Related