如何使用 javascript 在表中的一行 append

Question

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

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

Answer 1

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

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

用您的表的 id 或 class 替换表（除非您只打算拥有一张表）。

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 属性和 class 名称。

新行将具有与前最后一行相同数量的单元格。

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