如何删除 <tr> HTML 表中的所有元素(第一个元素除外)

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>