为什么我的表格标题在过滤表格数据时消失了？答案

【问题标题】：Why my Table header disappears while filtering the Table data?为什么我的表格标题在过滤表格数据时消失了？
【发布时间】：2021-12-26 13:07:10
【问题描述】：

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

为什么我的表格标题在键入搜索框时消失了？

如果我放了

if(index !== 0)，搜索框本身就从屏幕上消失了，谁能帮我找到解决办法？

是否有任何替代解决方案可用于实现此过滤器？

【问题讨论】：

标签： javascript html jquery search

【解决方案1】：

问题是您过滤了所有行，而您显然只想过滤tbody 中的行。您将需要调整您使用的选择器，然后您也不需要index 条件。

$("#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>

【讨论】：

【解决方案2】：

看来你的代码是错误的。

你的表体是空的，你在你的表上执行搜索标题。所以尝试重新组织你的代码，把你的 id 值 #communication_mode_table 放到表体标签内容而不是你的标题。

【讨论】：