HTML 表 --> 在多列表中选择 1 列进行过滤答案

【问题标题】：HTML Table --> Selecting 1 Column to Filter in a Multi-Column TableHTML 表 --> 在多列表中选择 1 列进行过滤
【发布时间】：2013-11-28 09:20:47
【问题描述】：

我想对表格的一列执行 HTML 表格搜索。此示例中的表格here 显示了 2 列。我已将类添加到标签以选择仅过滤“标题 1”列 - 但是，代码仍在查看过滤器的“标题 2”列。

var $rows = $('#table tbody tr td[class = "col1"]');
$('#search').keyup(function() {

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();
});

有人可以就我所犯的错误提供一些建议吗？

【问题讨论】：

标签： html filter html-table multiple-columns

【解决方案1】：

您的代码的主要问题是，当您执行hide() 时，您隐藏了<td> 而不是<tr>，因此当@987654327 的<td> 时，您最终会搜索col2 @ 被隐藏。所以，在这方面你需要使用父 <tr> 并隐藏它。

 }).parent("tr").hide();

我看到的另一个问题是您的 $row 最初很好，但是一旦您至少隐藏一行，您最终可以使用更少的行。所以，在这方面你需要保留原来的行数，用它来隐藏需要隐藏的，显示需要显示的。

查看我更新的JSFiddle Demo

【讨论】：

这个答案仍在过滤第二列。
您只想过滤第一列？同时显示被过滤行的第一列和第二列？
您能否简要解释一下这个语句：$("tr:hidden").show()？为什么这个语句在 .filter 行之前？代码有效，我只是不确定为什么行仍然可见时存在“tr：hidden”。如果您能帮助我弄清楚我不理解的内容，我将不胜感激。再次感谢。
@user2134003 tr:hidden 用于显示或取消隐藏所有隐藏的行，如果有/是隐藏的行。因此，每次您键入或搜索时，您都会通过过滤器获得一组新的隐藏行。

【解决方案2】：

根据 OPs cmets。

我认为您遇到了麻烦，因为您的选择器太详细了。试试：

var $rows = $(".col1", "table");

【讨论】：

问题是，即使我选择了第一列，当我只想过滤一个列时，代码也会过滤两列。