javascript - How can I delete all the <tr> elements (except the first one) in a HTML table - Stack Overflow

admin管理员组

文章数量:1291148

Let's say I have a table like this:

<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>

Let's say I have a table like this:

<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>

As the ment says, I want to remove every single row underneath the header row. Or, in more technical terms, I want to delete every element from the ment until the end table tag.

I do not want to use jQuery, so this question is different to other ones on Stack Overflow. I tried some of the pure JS solutions (which is what I want) but they were too plex and I couldn't get my head around it!

Thanks for any assistance.

So far I have tried this from another tutorial but it said 'cannot read property 'length' of undefined':

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

• javascript
• html
• html-table

Share Improve this question Follow edited Oct 19, 2017 at 17:38 S. Jones asked Oct 19, 2017 at 17:26 S. JonesS. Jones 6111 silver badge99 bronze badges 2

• Please post what you have tried so far – Huangism Commented Oct 19, 2017 at 17:28
• Try tbody{display:none} or tbody > tr{display:none} – blecaf Commented Oct 19, 2017 at 17:33

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

Delete the second element until there's only one element left:

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>

You can get the first tr and replace it with all table body.

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>

You can do it with CSS if you want. tr+tr selects all rows except the first one.

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>

本文标签： javascriptHow can I delete all the lttrgt elements (except the first one) in a HTML tableStack Overflow