Javascript add Row，一个函数用于不同的表答案

【问题标题】：Javascript add Row, one function for different tablesJavascript add Row，一个函数用于不同的表
【发布时间】：2014-10-16 15:55:12
【问题描述】：

我有几张这样的桌子

<table id="table_1">
<tr>
<td><input type="text" name="date[]"</td>
</tr>
</table>

<td> 的数量非常多变。

目前我正在使用这样的功能：

function addRow(){
var table = document.getElementById('table_1');
var row = table.insertRow(-1);
var cell1 = row.insertCell(0)
....
cell1.innerHTML="<input type='text' name='date[]' />
}

使用此方法，需要为每种类型的表提供自定义函数。

有没有办法在表格中添加与最后一行完全相同的 Line？在一个包含 7 个单元格的表格中，将添加 7 个单元格，并具有正确的内容。

这在纯 JS 中可能吗？

【问题讨论】：

以.querySelectorAll()或.getElementsByTagName()等开头
能否提供一个示例或教程页面？和 .getElementsByTagName() 是同样的问题，tagName 不知道，它因表而异
是的，可以有一个共同的功能，但请定义“具有正确的内容”。此内容取自哪里？上一行？
标签名称为table。怎么改？
快速谷歌搜索将为您带来数百个教程。这不是本网站的目的。我们在这里帮助您解决一段代码中指出的问题。

标签： javascript html-table

【解决方案1】：

也许这就是你需要的：http://jsfiddle.net/thecbuilder/bx326s31/1/

<input type="button" onclick="cloneRow()" value="Clone Row" />
<input type="button" onclick="createRow()" value="Create Row" />
<table>
    <tbody id="tableToModify">
        <tr id="rowToClone">
            <td><input type="text" name="txt[]"/></td>
            <td>bar</td>
        </tr>
    </tbody>
</table>

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
    clone.id = "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
}

参考：https://stackoverflow.com/a/1728578/3603806

【讨论】：

【解决方案2】：

你可以用 jQuery 做到这一点：

编辑：抱歉，我没看到你想要纯 JS。

jQuery

$('button').click(function(){
    var table = $(this).prev('table');
    var lastrow = $('tr:last-child', table).html();
    table.append('<tr>' + lastrow + '</tr>');
});

HTML

<table>
    <tr>
        <th>Name</th>
        <th>Country</th>
        <th>Age</th>
    </tr>
    <tr>
        <td><input type="text"/></td>
        <td><input type="text"/></td>
        <td><input type="text"/></td>
    </tr>
</table>

<button>Add a row</button>

<table>
    <tr>
        <th>Meal</th>
        <th>Price</th>
    </tr>
    <tr>
        <td><input type="text"/></td>
        <td><input type="text"/></td>
    </tr>
</table>

<button>Add a row</button>

JS Fiddle Demo

【讨论】：