HTML and JavaScript

$("#btn10").click(function() {
    $(".search-boxes").toggle()
  }),

  $("#comfilter").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#communication_mode_table tr").each(function(index) {
      if (index !== 1) {
        $row = $(this);
        var id = $row.find("td:first").text().toLowerCase();
        if (id.indexOf(value) == -1) {
          $row.hide();
        } else {
          $row.show();
        }
      }
    });
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="btn10"><i class="fa fa-filter"></i> Filter</button>

<table id="communication_mode_table" class="table table-bordered table-hover">
  <thead>
    <tr>
      <th>Nature Of Fault</th>
      <th>Push Notification&nbsp;&nbsp;&nbsp;
        <input type='checkbox' name='all_push' id='all_push' class='all_push' </th>
        <th>SMS&nbsp;&nbsp;&nbsp;
          <input type='checkbox' name='all_sms' id='all_sms' class='all_sms' />
        </th>
        <th>Call&nbsp;&nbsp;&nbsp;
          <input type='checkbox' name='all_call' id='all_call' class='all_call' />
        </th>
        <th>Email&nbsp;&nbsp;&nbsp;
          <input type='checkbox' name='all_email' id='all_email' class='all_email' />
        </th>
    </tr>
    <tr class="search-boxes " style="display: none;">
      <th>
        <input id="comfilter" type="text" class="form-control" />
      </th>
      <th></th>
      <th></th>
      <th></th>
      <th></th>
    </tr>
  </thead>
  <tbody> </tbody>
</table>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

Why my table header disappears while keying the search box ?

Also if I put

if(index !== 0) , the search box itself disappears from the screen, Can anyone help me to find the solution ?

Is there Any alternative solution available to achieve this filter?

CodePudding user response：

it seem that your code is wrong.

your table body is empty and you perform seach on your header. so try to reorganise your code, put your id value #communication_mode_table to the table body tag content rather than your header.

CodePudding user response：

The problem is that you filter all rows, when you clearly want to filter only rows in tbody. You will need to adjust the selector you use and then you will not need index criteria either.

$("#btn10").click(function() {
    $(".search-boxes").toggle()
  }),

  $("#comfilter").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#communication_mode_table tbody tr").each(function(index) {
        $row = $(this);
        var id = $row.find("td:first").text().toLowerCase();
        if (id.indexOf(value) == -1) {
          $row.hide();
        } else {
          $row.show();
        }
    });
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="btn10"><i class="fa fa-filter"></i> Filter</button>

<table id="communication_mode_table" class="table table-bordered table-hover">
  <thead>
    <tr>
      <th>Nature Of Fault</th>
      <th>Push Notification&nbsp;&nbsp;&nbsp;
        <input type='checkbox' name='all_push' id='all_push' class='all_push' </th>
        <th>SMS&nbsp;&nbsp;&nbsp;
          <input type='checkbox' name='all_sms' id='all_sms' class='all_sms' />
        </th>
        <th>Call&nbsp;&nbsp;&nbsp;
          <input type='checkbox' name='all_call' id='all_call' class='all_call' />
        </th>
        <th>Email&nbsp;&nbsp;&nbsp;
          <input type='checkbox' name='all_email' id='all_email' class='all_email' />
        </th>
    </tr>
    <tr class="search-boxes " style="display: none;">
      <th>
        <input id="comfilter" type="text" class="form-control" />
      </th>
      <th></th>
      <th></th>
      <th></th>
      <th></th>
    </tr>
  </thead>
  <tr><td>12</td><td>34</td><td>56</td><td>78</td><td>90</td></tr>
  <tbody> </tbody>
</table>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>