无法向 HTML 表格添加新行

Question

我有一张桌子，我想向它添加一个新行，但它不起作用我想复制它的第一行，因为它就像新行的模板，然后我想将它附加到正文但由于某种原因它不起作用，即使我没有收到任何错误这里是我的代码：// getting the body of the tablevar tableBody = document.getElementById("tableBody");// getting the row templatevar newRow = document.getElementById("tableRow").cloneNode(true);// trying to add ittableBody.appendChild(newRow);

Answer 1

在 TR 标签上有一个 id 可能不是一个好主意，因为克隆的行也会有那个 id，你最终会得到一个具有相同 id 的行集合。您可以使用 tbody 行集合定位第一行：

function cloneRow() {

  let tb = document.getElementById("tablebody");

  let nr = tb.rows[0].cloneNode(true);

  tb.appendChild(nr);

}

<button onclick="cloneRow();">Clone Row</button>

<table>

  <tbody id="tablebody">

    <tr>

      <td>row 1</td>

    </tr>

    <tr>

      <td>row 2</td>

    </tr>

  </tbody>

</table>