如何删除 HTML 表格中的所有 <tr> 元素（第一个元素除外）

Question

假设我有一张这样的桌子：

<table id="datatable1">
  <tr>
    <th>Header column 1</th>
    <th>Header column 2</th>
  </tr>
  <!-- Remove everything from here down until </table> -->
  <tr>
    <td>Data row 1, column 1</td>
    <td>Data row 1, column 2</td>
  </tr>
  <tr>
    <td>Data row 2, column 1</td>
    <td>Data row 2, column 2</td>
  </tr>
</table>

正如评论所说，我想删除标题行下方的每一行。或者，用更专业的术语来说，我想删除评论中的每个元素，直到结束表标记。

我不想使用 jQuery，所以这个问题与 Stack Overflow 上的其他问题不同。我尝试了一些纯 JS 解决方案（这正是我想要的），但它们太复杂了，我无法理解它！

感谢您的帮助。

到目前为止，我已经从另一个教程中尝试过这个，但它说'无法读取未定义的属性'长度'：

function clearTable(table) {
    var rows = table.rows;
    var i = rows.length;
    while (--i) {
        rows[i].parentNode.removeChild(rows[i]);
        // or
        // table.deleteRow(i);
    }
}

Answer 1

删除第二个元素，直到只剩下一个元素：

var table = document.getElementById("datatable1");

while (table.rows.length > 1) {
  table.deleteRow(1);
}

<table id="datatable1">
  <tr>
    <th>Header column 1</th>
    <th>Header column 2</th>
  </tr>
  <!-- Remove everything from here down until </table> -->
  <tr>
    <td>Data row 1, column 1</td>
    <td>Data row 1, column 2</td>
  </tr>
  <tr>
    <td>Data row 2, column 1</td>
    <td>Data row 2, column 2</td>
  </tr>
</table>

Answer 2

您可以获取第一个 tr 并将其替换为所有表体。

var mytbl = document.getElementById("table1");
mytbl.getElementsByTagName("tbody")[0].innerHTML = mytbl.rows[0].innerHTML;

<table id="table1">
  <tr>
    <th>Header column 1</th>
    <th>Header column 2</th>
  </tr>
  <!-- Remove everything from here down until </table> -->
  <tr>
    <td>Data row 1, column 1</td>
    <td>Data row 1, column 2</td>
  </tr>
  <tr>
    <td>Data row 2, column 1</td>
    <td>Data row 2, column 2</td>
  </tr>
</table>

Answer 3

如果你愿意，你可以用 CSS 来做。 tr+tr 选择除第一行之外的所有行。

tr + tr {
  display: none;
}

<table>
  <tr>
    <th>Header column 1</th>
    <th>Header column 2</th>
  </tr>
  <!-- Remove everything from here down until </table> -->
  <tr>
    <td>Data row 1, column 1</td>
    <td>Data row 1, column 2</td>
  </tr>
  <tr>
    <td>Data row 2, column 1</td>
    <td>Data row 2, column 2</td>
  </tr>
</table>