How to append a row in table using javascript

I want to append a new row in my table using Javascript but the new row should be like my previous rows.

I am usin开发者_开发百科g CSS to format my rows.

If you are using jQuery it will be something like this:

$(document).ready(function() {
    $("table tr:last").clone().appendTo("table");
})

Replacing table with the id or class of your table (unless you only plan to have one table).

Using good old Node.cloneNode(deep) along with HTMLTableElement.rows:

HTML:

<table id="foo">
    <tbody id="bar">
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
    </tbody>
</table>

JS:

var foo = document.getElementById("foo");
var bar = document.getElementById("bar");
var rows = foo.rows;
var lastRow = rows[rows.length-1];
var newRow = cloneRow(lastRow, true, bar);

function cloneRow(row, append, parent)
{
    var newRow = row.cloneNode(true); 
    if(append)
    {
        if(parent)
        {
            parent.appendChild(newRow);
        }
    }
    return newRow;
}

For comparison's sake, here's my code juxtaposed against the jQuery answer: http://jsperf.com/dom-methods-vs-jquery-with-tables

Let's say that your row has a css style of .row

So you could just use DOM methods to create a new tr, add the class="row" then add the appropriate amount of td

Here is a solution that avoids the use of the cloneNode method, and that do not copy the content, data or events of the previous last row, just its CSS attributes and class names.

The new row will have the same number of cell as the previous last row.

var lastRow = myTable.rows[myTable.rows.length-1];
var newRow = myTable.insertRow();
newRow.className = lastRow.className;
newRow.style.cssText = lastRow.style.cssText;
for (var i = 0; i < lastRow.cells.length; i++) {
    var newCell = newRow.insertCell(i);
    newCell.className = lastRow.cells[i].className;
    newCell.style.cssText = lastRow.cells[i].style.cssText;
}