javascript - 使用 JS 隐藏 thead 过滤 HTML 表格

Question

我目前有一个 HTML 表格过滤器，示例如下。这也过滤了广告。

  <div class="col-md-3 col-md-offset-3" style="padding-bottom: 20px;">
  <input type="text" class="form-control" id="Search" onkeyup="SearchBar()" placeholder="Search">
</div>

<table id="MainTable" class="table table-condensed table-hover">
    <thead>
      <th width="2%" style="text-align: center;"></th>
      <th width="50%">Display Name</th>
      <th width="20%">Dashboard</th>
    </thead>
    <tbody>
     <tr class="">
      <td style="text-align: center;">a</td>
      <td>DashboardTest</td>
      <td>b</td>
     </tr>
    </tbody>
</table>


function SearchBar() {
 var $rows = $('#MainTable tr');
    $('#Search').keyup(function() {
        var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();

        $rows.show().filter(function() {
            var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
            return !~text.indexOf(val);
        }).hide();
    });
}

有没有办法使用这个 JS 不包含 thead？

Answer 1

是的。您只能在 TBODY 中搜索。给 TBODY 一个 id="MyBody"将此行更改为:var $rows = $('#MyBody tr');它不会再在 thead 中搜索。