Filter table data, and show table head-CodePudding

I have a big table with multiple table heads. I have a simple js function to filter table data, but I need to make it so that it shows the table head section too. I added tbody and tr tags to my function but now it searches data in table but shows every thead section. How can I get that it shows only the specific thead section which contains searched tr element?

My code:

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

   
<div >
  <input type="text"  aria-label="Small" aria-describedby="inputGroup-sizing-sm" placeholder="Meklēt.." id="myInput">
</div>
<table id="myTable" >
  <thead >
    <tr>
      <th colspan="3">Information about department</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Name - It</td>
      <td>Phone - 1111111</td>
      <td>E-mail - [email protected]</td>
    </tr>
  </tbody>
  <thead >
    <tr>
      <th colspan="3">Information about department 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Name - Finance</td>
      <td>Phone - 1111112</td>
      <td>E-mail - [email protected]</td>
    </tr>
<tr>
      <td>Name - Finance2</td>
      <td>Phone - 1111113</td>
      <td>E-mail - [email protected]</td>
    </tr>
  </tbody>
</table>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

CodePudding user response：

You can try the below approach with data attribute data-group to group thead and tbody into separate groups. That would help to recognize element sections and find string matches in groups easily.

$(document).ready(function() {
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase().trim();
    $("#myTable thead").each(function() {
      var group = $(this).data("group")
      var isTheadMatched = $(this).text().toLowerCase().indexOf(value) > -1

      var selector = `tbody[data-group='${group}'] tr`
      var allRows = $('#myTable').find(selector);
      var isAnyRowMatched = false;

      for (var row of $(allRows)) {
        const isRowMatched = isTheadMatched || $(row).text().toLowerCase().indexOf(value) > -1
        $(row).toggle(isRowMatched);
        if ($(row).text().toLowerCase().indexOf(value) > -1) {
          isAnyRowMatched = true;
        }
      }

      $(this).toggle(isTheadMatched || isAnyRowMatched)
    });
  });
});

<div >
  <input type="text"  aria-label="Small" aria-describedby="inputGroup-sizing-sm" placeholder="Meklēt.." id="myInput">
</div>
<table id="myTable" >
  <thead  data-group="1">
    <tr>
      <th colspan="3">Information about department</th>
    </tr>
  </thead>
  <tbody data-group="1">
    <tr>
      <td>Name - It</td>
      <td>Phone - 1111111</td>
      <td>E-mail - [email protected]</td>
    </tr>
  </tbody>
  <thead  data-group="2">
    <tr>
      <th colspan="3">Information about department 2</th>
    </tr>
  </thead>
  <tbody data-group="2">
    <tr>
      <td>Name - Finance</td>
      <td>Phone - 1111112</td>
      <td>E-mail - [email protected]</td>
    </tr>
    <tr>
      <td>Name - Finance2</td>
      <td>Phone - 1111113</td>
      <td>E-mail - [email protected]</td>
    </tr>
  </tbody>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>