如何使用Javascript制作带有可以复制的行的表格（在该行后添加一个包含相同内容的新行）？

28 浏览
0 Comments

如何使用Javascript制作带有可以复制的行的表格（在该行后添加一个包含相同内容的新行）？

我正在尝试制作一个包含多行的表格，每行的最后一个单元格中都有一个按钮，点击按钮可以复制该行。其他单元格都包含一个输入框（文本）。新增的输入框的内容（值）必须与上方的输入框内容相同（它们是复制的内容）。但是这些副本不能再被复制！\n

\n这些输入框必须有一个唯一的名称，类似于：
\n1-1-姓名
\n1-1-年龄
\n1-1-国家
\n1-1-邮箱 \n如果复制了这一行，复制的输入框名称应该是这样的：
\n1-2-姓名
\n1-2-年龄
\n1-2-国家
\n1-2-邮箱 \n下一行使用3而不是2，以此类推。 \n

\n问题是，我猜想，我必须在没有使用jQuery的情况下完成这个任务。我只能使用JavaScript。这个可能吗？

0

2 答案

0 Comments

如何使用JavaScript制作可以复制（添加一个新行，其中包含相同内容的）行的表格？

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

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

所以你可以用JavaScript做任何你可以用jQuery做的事情。

Léon

如果可以避免，请不要使用innerHTML。

为什么innerHTML不是一个好主意？

使用innerHTML会强迫浏览器重新解析DOM，因为浏览器无法预测已添加了哪些元素。（在DOM操作中，浏览器可以）

我不知道这一点，给你+1。

0
0 Comments

如何用Javascript制作带有可复制行的表格？这个问题的出现原因是，作者想要在表格中添加新的行时，自动复制之前的行并将其插入到正确的位置。为了解决这个问题，作者使用了纯Javascript的方法来复制表格行并增加其ID。以下是解决方法的代码：

var idInit;
var table = document.getElementById('theTable');
table.addEventListener('click', duplicateRow);
function duplicateRow(e){
    if(e.target.type == "button"){
        var row = e.target.parentElement.parentElement;
        var newRow = row.cloneNode(true);
        incrementId(newRow);
        var cells = newRow.cells;
        for(var i = 0; i < cells.length; i++){
            incrementId(cells[i]);
        }
        insertAfter(row, newRow);
        idInit++;
    }
}
function incrementId(elem){
    idParts = elem.id.split('-');
    idInit ? idParts[1] = idInit + 1 : idInit = idParts[1]++;
    elem.id = idParts.join('-');
}
function insertAfter(after, newNode){
    after.parentNode.insertBefore(newNode, after.nextSibling);
}

这段代码使用了事件监听器，当表格中的按钮被点击时，会触发`duplicateRow`函数。该函数首先获取被点击按钮所在的行，然后使用`cloneNode`方法复制整行，并增加新行的ID。然后，它遍历新行的所有单元格，并为每个单元格增加ID。最后，使用`insertAfter`方法将新行插入到正确的位置。

在代码中，还给出了一个示例表格，该表格只有一行，并且有一个按钮。当按钮被点击时，会复制整行并插入到正确的位置。

在编辑部分，作者提到在旧版本的IE浏览器上无法正常工作，为了解决这个问题，作者将第三行的代码注释掉，并将按钮的代码修改为`onClick="duplicateRow(event);"`。

最后，作者建议将事件监听器添加到整个表格上，以提高效率和内存使用率。

0