在 JavaScript 中创建表格行的克隆并附加到表格答案

【问题标题】：Create clone of table row and append to table in JavaScript在 JavaScript 中创建表格行的克隆并附加到表格
【发布时间】：2010-12-16 05:50:56
【问题描述】：

在 JavaScript 中，如何将行动态添加到表中？在 JavaScript 事件中，我想创建一个类似的行并附加到表中。

【问题讨论】：

peirix：你说得对，这里是“也许这篇文章对stackoverflow.com/questions/171027/jquery-add-table-row有帮助”“

标签： javascript

【解决方案1】：

如果您不想使用 jQuery，可以使用几个简单的函数，例如 cloneNode()、createElement() 和 appendChild()。这是一个简单的演示，它使用 clone 或 create 方法将一行附加到表的末尾。在 IE8 和 FF3.5 中测试。

<html>

<head>
  <script type="text/javascript">
    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
    }
  </script>
</head>

<body>
  <input type="button" onclick="cloneRow()" value="Clone Row" />
  <input type="button" onclick="createRow()" value="Create Row" />
  <table>
    <tbody id="tableToModify">
      <tr id="rowToClone">
        <td>foo</td>
        <td>bar</td>
      </tr>
    </tbody>
  </table>
</body>

</html>

【讨论】：

克隆的行是否还包括所有在表格单元格中使用影子 Dom 的 Web 组件？
Shadow DOM 不会被复制（就像非内联事件处理程序等一样）。您可以通过在调用克隆节点之前添加row.attachShadow({mode:'open'}) 并使用浏览器开发工具进行检查来自行测试。请记住，我在 10 年前回答了这个问题。我想说现在有更好的方法来解决这个问题。
好的，感谢您再次查看我的 cmets！您会建议如何复制具有影子 Dom 的表格单元格？

【解决方案2】：

今天尝试了各种搜索，利用来源：http://www.mredkj.com/tutorials/tablebasics3.html 和 http://www.mredkj.com/tutorials/tableaddcolumn.html

这是我的逻辑研究的结果，它现在正在工作

    function addRow(id)
    { var x=document.getElementById(id).tBodies[0];  //get the table
      var node=t.rows[0].cloneNode(true);    //clone the previous node or row
      x.appendChild(node);   //add the node or row to the table
    }  

    function delRow(id)
    { var x=document.getElementById(id).tBodies[0]; //get the table
      x.deleteRow(1); //delete the last row
    }

注意 1：我的表格包含一个单元格，其中每个表格行 (tr) 都有一个文本框 + 一个标签。
注意2：连续有多个（td）具有标签+文本框

【讨论】：

你有完整的例子吗？

【解决方案3】：

我知道这是一篇旧文章，但我觉得以下代码可以帮助其他读者

  $("button").click(function () {
                $("#DataRow").clone().appendTo("#mainTable");
            });

【讨论】：

请注意，这不会复制克隆中的事件处理程序。 api.jquery.com/clone 此外，这无法解决重复 id 问题，因此会产生无效的 HTML
@MarkSchultheiss 事件处理程序如果被委派给高于被复制元素的元素（在本例中为tbody 或更高级别），则它们将正常工作。至于重复的 id，您可以使用与正在复制的项目分开的 id 计数器，并对事件触发器做出反应，以将正确的 id 应用于复制的节点。
@OXiGEN - 我知道这一切，是的，我的观点仍然坚持这不会那样做。即我引用的参考文献中的.clone(true)