Question

我想在表的一列上执行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();
});

有人能为我犯的错误提供一些建议吗？

Answer 1

根据OP的评论。

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

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

Answer 2

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

<tr>

我看到的另一个问题是你的}).parent("tr").hide();最初是好的，但有一次你至少隐藏一行，最后使用较少的行来处理。那么，就你而言需要保留原始行数并使用它来隐藏那些需要隐藏的行并显示需要显示的行。

查看我更新的JSFiddle Demo

HTML表格 - ＆gt;选择1列以在多列表中过滤

2 个答案: