Question

我想使用Javascript在我的表中添加一个新行，但新行应该像我以前的行一样。

我正在使用CSS格式化我的行。

Answer 1

如果您使用的是jQuery，它将是这样的：

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

用表的id或类替换表（除非你只计划有一个表）。

Answer 2

使用好的旧Node.cloneNode(deep)和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;
}

为了比较，这里是我的代码与jQuery答案并列：http://jsperf.com/dom-methods-vs-jquery-with-tables

Answer 3

假设您的行的css样式为.row

因此您可以使用DOM方法创建新的tr，添加class="row"然后添加适当数量的td

Answer 4

这是一个避免使用cloneNode方法的解决方案，不复制前一个最后一行的内容，数据或事件，只是它的CSS属性和类名。

新行的单元格数与前一行的单元格数相同。

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;
}

如何使用javascript在表中追加一行

4 个答案: