如何使用 Javascript 制作一个包含可复制行的表（在该行之后添加一个新行，包含相同的行）？

Question

我正在尝试制作一个包含多行的表格，每行在最后一个单元格中都有一个按钮，用于创建该行的副本。

所有其他单元格都包含一个输入（文本）。 添加的输入的内容（值）必须与上面的相同（它们是它们的副本）。

但是无法复制副本！

---

输入必须具有唯一的名称，如下所示：
1-1-姓名
1-1-年龄
1-1-国家
1-1-电子邮件

如果此行被复制，则复制的输入必须具有这样的名称
1-2-姓名
1-2岁
1-2-国家
1-2-电子邮件

下一个是 3 而不是 2，以此类推。

---

我想，这个问题是我必须在没有 JQuery 的情况下这样做。我只能使用 Javascript。这甚至可能吗？

Answer 1

看看this fiddle。这是一种复制表格行并增加其 ID 的纯 js（非 jQuery）方法：

var idInit;
var table = document.getElementById('theTable');
    table.addEventListener('click', duplicateRow);  // Make the table listen to "Click" events

function duplicateRow(e){
    if(e.target.type == "button"){ // "If a button was clicked"
        var row = e.target.parentElement.parentElement; // Get the row
        var newRow = row.cloneNode(true); // Clone the row

        incrementId(newRow); // Increment the row's ID
        var cells = newRow.cells;
        for(var i = 0; i < cells.length; i++){
            incrementId(cells[i]); // Increment the cells' IDs
        }
        insertAfter(row, newRow); // Insert the row at the right position
        idInit++;
    }
}

function incrementId(elem){
    idParts = elem.id.split('-'); // Cut up the element's ID to get the second part.
    idInit ? idParts[1] = idInit + 1 : idInit = idParts[1]++;  // Increment the ID, and set a temp variable to keep track of the id's.
    elem.id = idParts.join('-'); // Set the new id to the element.
}

function insertAfter(after, newNode){
    after.parentNode.insertBefore(newNode, after.nextSibling);
}​

<table id="theTable">
    <tr id="1-1">
        <td id="1-1-name"><input type="text"/></td>
        <td id="1-1-age"><input type="text"/></td>
        <td id="1-1-country"><input type="text"/></td>
        <td id="1-1-email"><input type="text"/></td>
        <td id="1-1-button"><input type="button" value="Copy"/></td>
    </tr>
</table>​

编辑：已更新以在单击的行之后插入新行。现在有了按钮和输入！

Answer 2

是的，这是可能的， 你应该创建一个新的表格行， 然后将其innerHTML 设置为上一行的innerHTML。

jQuery 是一个 JavaScript 库，这意味着它是用 JavaScript 函数构建的。

所以一切你可以用 jQuery 做，你也可以用 JavaScript 做。

莱昂