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

我试图创建一个包含几行的表，每行在最后一个单元格中都有一个按钮，用于创建该行的副本

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

但是，无法复制副本

---

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

如果复制了此行，则复制的输入必须具有如下名称
1-2-名称
1-2岁
1-2个国家
1-2-电子邮件

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

---

我想，这方面的问题是，我必须在没有JQuery的情况下完成这项工作。我只能使用Javascript。这可能吗

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

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

所以你可以用jQuery做任何事情，你也可以用JavaScript做任何事情

莱昂

看看。下面是复制表行并增加其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);
}​

var；
var table=document.getElementById（'theTable'）；
table.addEventListener（'click'，duplicateRow）；//使表侦听“单击”事件
函数行（e）{
如果（e.target.type==“按钮”）{/“如果单击了按钮”
var row=e.target.parentElement.parentElement；//获取该行
var newRow=row.cloneNode（true）；//克隆该行
incrementId（newRow）；//增加行的ID
var cells=newRow.cells；
对于（变量i=0；i

​

---

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

重复：这不是一个真正的重复，因为我希望副本出现在原始的后面，而不是在表的末尾。如果ID没有排序，这有关系吗？不，这没有关系。重要的是，它们出现在单击的一个之后。；）如果可以防止，请不要使用

innerHTML

。为什么innerHTML是个坏主意？使用

innerHTML

会迫使浏览器重新解析DOM，因为浏览器无法预测添加了什么类型的元素。（在DOM操作中，浏览器可以）我不知道，+1是给你的。这正是我需要的：D谢谢！！这在我的工作PC上不起作用（使用旧版本的IE）。所以我把第三行变成了注释：

//table.addEventListener（'click'，duplicateRow）

我将此添加到按钮输入中：

onClick=“duplicateRow（event）；”

我建议将其添加到表中，然后。出于效率/内存使用的考虑，您通常需要尽可能少的事件侦听器。

<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>​