javascript - jQuery 实时搜索 - 也删除表头

Question

我在 this link 使用正则表达式搜索代码, 以允许实时搜索通过 php 在服务器端填充的相当大的表。

与上面链接中描述的场景略有不同，我使用表头标签将表行的 block 分组(标记)在一起。我防止这些表标题行与表行的其余部分一起消失，以便在搜索时，结果仍嵌套在它们的组中。

我希望表格标题行也消失，但前提是它与下一个表格标题行之间没有表格行。我不确定计算行数是否有效，因为行并没有消失，它们只是被隐藏了。

举个例子，我的 table 是这样布置的:

HTML:

 <table>
  <tr>
     <th colspan="2">Group 1</th>
  </tr>
  <tr  class="searchable">
    <td>Record 1</td>
    <td>Record 2</td>
  </tr>
  <tr  class="searchable">
    <th>Group 2</th>
  </tr>
  <tr>
    <td>Record 3</td>
    <td>Record 4</td>
  </tr>
</table>

jQuery:

$( document ).ready(function() {
    var $rows = $('tr.searchable');

    $('#search').keyup(function(e) {

        if (e.keyCode == 27) { $(this).val("") }

        var val = '^(?=.*\\b' + $.trim($(this).val()).split(/\s+/).join('\\b)(?=.*\\b') + ').*$',
            reg = RegExp(val, 'i'),
            text;

        $rows.show().filter(function() {
            text = $(this).text().replace(/\s+/g, ' ');
            return !reg.test(text);
        }).hide();
    });
});

感谢所有帮助!!谢谢!

Answer 1

我通过添加另一个类(每个组/标签都是唯一的)并在“.keyup()”部分中计算每个类的“:visible”行来解决我的困境。一旦每个类中的行数下降到指定数量以下，我就在 if 语句中使用“.hide()”来使表头消失。 if 语句的 else 端使用“.show()”在类数超过指定数量时返回表头。