javascript - Delete All Rows in Table except the header row

Using Javascript (with JQuery), I would like to delete all rows in a table except the header row.

This seems like a simple thing because I see quite a few posts on StackOverFlow about this and a lot of solutions provided and accepted. But, none of them seem to work for me. Please refer to my code below:

function delTable() {
  console.log("Delete all rows, but the header");

  // Option-A
  // $('#TableA tbody tr').remove();

  // Option-B
  // Accepted answer for: 
  // $('#TableA tr').not(function(){ return !!$(this).has('th').length; }).remove();

  // Option-C
  $('#TableA tbody').empty();

}

<script src=".3.1/jquery.min.js"></script>
<html>

<body onLoad="delTable();">
  <table id="TableA">
    <th>
      <tr>
        <td>Col A</td>
        <td>Col B</td>
      </tr>
    </th>
    <tbody>
      <tr>
        <td>1</td>
        <td>2</td>
      </tr>
      <tr>
        <td>3</td>
        <td>4</td>
      </tr>
    </tbody>
  </table>

</body>

</html>

Using Javascript (with JQuery), I would like to delete all rows in a table except the header row.

function delTable() {
  console.log("Delete all rows, but the header");

  // Option-A
  // $('#TableA tbody tr').remove();

  // Option-B
  // Accepted answer for: https://stackoverflow./questions/9420203/how-to-remove-all-rows-of-the-table-but-keep-the-header
  // $('#TableA tr').not(function(){ return !!$(this).has('th').length; }).remove();

  // Option-C
  $('#TableA tbody').empty();

}

<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>

<body onLoad="delTable();">
  <table id="TableA">
    <th>
      <tr>
        <td>Col A</td>
        <td>Col B</td>
      </tr>
    </th>
    <tbody>
      <tr>
        <td>1</td>
        <td>2</td>
      </tr>
      <tr>
        <td>3</td>
        <td>4</td>
      </tr>
    </tbody>
  </table>

</body>

</html>

Does any one know what I am doing wrong? Thanks.

-Karthik

Share asked Jul 6, 2020 at 20:52 Karthik 7692 gold badges12 silver badges19 bronze badges

2 One thing is that you use <th> instead of <thead> to denote the header part. Since you don't describe the effects of your "doing it wrong" it isn't clear whether that could be the source or just a typo in your post here, with the problem being elsewhere. – Hans-Martin Mosner Commented Jul 6, 2020 at 20:59

Add a ment |

5 Answers 5

Sorted by: Reset to default 2

Just update your th to thead and you good to go, see below:

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    
    <script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.1.0/jquery.js"></script>

  
</head>
<body onLoad="delTable()">
  <table id="TableA">
    <thead>
      <tr>
        <td>Col A</td>
        <td>Col B</td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>2</td>
      </tr>
      <tr>
        <td>3</td>
        <td>4</td>
      </tr>
    </tbody>
  </table>

</body>
</html>

JS:

function delTable() {
  console.log("Delete all rows, but the header");

  // Option-A
  // $('#TableA tbody tr').remove();

  // Option-B
  // Accepted answer for: https://stackoverflow./questions/9420203/how-to-remove-all-rows-of-the-table-but-keep-the-header
  // $('#TableA tr').not(function(){ return !!$(this).has('th').length; }).remove();

  // Option-C
  $('#TableA tbody').empty();

}

Working fiddle: https://jsfiddle/pvfkxdby/1/

You need to replace th with thead and use $('#TableA tbody').find("tr") as follows:

function delTable() {
  console.log("Delete all rows, but the header");
  $('#TableA tbody').find("tr").remove();
}

<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>

<body onLoad="delTable();">
  <table id="TableA">
    <thead>
      <tr>
        <td>Col A</td>
        <td>Col B</td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>2</td>
      </tr>
      <tr>
        <td>3</td>
        <td>4</td>
      </tr>
    </tbody>
  </table>

</body>

</html>

This worked for me. You set apart your header with <th> instead of <thead> and then you had <td> in your header instead of <th>.

$(document).ready(() => {
  $("#delete").click(() => {
    $("#TableA tbody tr").remove()
  })
})

<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="TableA">
    <thead>
      <tr>
        <th>Col A</th>
        <th>Col B</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>2</td>
      </tr>
      <tr>
        <td>3</td>
        <td>4</td>
      </tr>
    </tbody>
 </table>
 <button id="delete">delete</button>

By inspecting your HTML in my Google Chrome I can see that the rows were rearranged so that even the first line is inside <tbody> tag. Therefore the whole table is removed. You can fix this simply by wrapping the first row in <thead> tag or use different approach which does not use <tbody> tag.

That would be a simple one-liner:

function delTable() {
  console.log("Delete all rows, but the header");

  $('#TableA').find("tr:not(:first)").remove(); // Code to remove all rows in table except the header row
}

What the given code does is identify the rows in the table 'TableA' that is not the first row using the mand: $('#TableA').find("tr:not(:first)") and subsequently remove the rows using the .remove() mand.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Delete All Rows in Table except the header row - Stack Overflow

5 Answers 5

与本文相关的文章

评论列表(0)