Question

我有几张像这样的表

<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[]' />
}

使用这种方法，每种类型的表都需要一个自定义函数。

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

这在纯JS中是否可行？

Answer 1

你可以用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

Answer 2

也许这就是您所需要的：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

Javascript添加Row，一个用于不同表的函数

2 个答案:

JS Fiddle Demo