Shyju Shyju - 24 days ago 4x
Javascript Question

Create clone of table row and append to table in JavaScript

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.


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.


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

  <input type="button" onclick="cloneRow()" value="Clone Row" />
  <input type="button" onclick="createRow()" value="Create Row" />
    <tbody id="tableToModify">
      <tr id="rowToClone">