如何使用javascript追加表格中的一行

问题描述

| 我想使用Javascript在表格中添加新行，但新行应与之前的行相似。 我正在使用CSS格式化行。     

解决方法

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

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

用表的ID或类替换表（除非您仅打算拥有一张表）。     ,        结合使用旧的ѭ1good和

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     ,        假设您的列的CSS样式为

.row

因此，您可以使用DOM方法创建一个新的

tr

，添加

class=\"row\"

，然后添加适当数量的

td

    ,        这是一个避免使用

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