jquery exclude header <th> in filter-CodePudding

I am trying to get jquery to not include the header in the filter. For example if you type John the header disappears. I tried to use the not() but it is not working. One option is to start the id="myTable" at the tbody but the way I am rending the table I don't want that.

$(document).ready(function() {
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#myTable tr:not('th')").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}
td,
th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

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

<body>
  <h2>Filterable Table</h2>
  <p>Try first names, last names or emails:</p>
  <input id="myInput" type="text" placeholder="Search..">
  <br><br>

  <table id="myTable">
    <thead>
      <tr> <th>Firstname</th>  <th>Lastname</th>  <th>Email</th>
      </tr>
    </thead>
      <tr>
        <td>John</td>  <td>Doe</td> <td>[email protected]</td>
      </tr>
      <tr>
        <td>Mary</td> <td>Moe</td> <td>[email protected]</td>
      </tr>
      <tr>
        <td>July</td> <td>Dooley</td>  <td>[email protected]</td>
      </tr>
      <tr>
        <td>Anja</td> <td>Ravendale</td> <td>[email protected]</td>
      </tr>
  </table>
</body>

CodePudding user response：

Use :has selector to get result that have td elements on it.

Example:

$(document).ready(function() {
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#myTable tr:has(td)").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td,
th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

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

<body>
  <h2>Filterable Table</h2>
  <p>Try first names, last names or emails:</p>
  <input id="myInput" type="text" placeholder="Search..">
  <br><br>

  <table id="myTable">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tr>
      <td>John</td>
      <td>Doe</td>
      <td>[email protected]</td>
    </tr>
    <tr>
      <td>Mary</td>
      <td>Moe</td>
      <td>[email protected]</td>
    </tr>
    <tr>
      <td>July</td>
      <td>Dooley</td>
      <td>[email protected]</td>
    </tr>
    <tr>
      <td>Anja</td>
      <td>Ravendale</td>
      <td>[email protected]</td>
    </tr>
  </table>
</body>

CodePudding user response：

Have you tried this?

$("#myTable tbody tr").filter(function() {
  $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});