在列中搜索值，然后在匹配结果后过滤表答案

【问题标题】：Search for value in column then filter table after matched results在列中搜索值，然后在匹配结果后过滤表
【发布时间】：2019-03-29 10:23:40
【问题描述】：

我正在努力实现的目标

短：在列中搜索值，然后在匹配结果后过滤表

我得到了定义了值的 HTML 按钮。单击按钮时，将值传递给字符串：value，然后在第一列中搜索值，将值与列的内容匹配并隐藏不匹配的值。

我想用 jQuery 来实现。

我的问题

我似乎被困在如何搜索特定列以及如何将其与字符串 value 匹配。我正在使用pseudo 选择器来查找该列。 我隐藏了所有不匹配的内容。

应该处理这个的行：

$(this).toggle("td:nth-child(1)").text().toLowerCase().includes(value);

代码和 DOM

HTML

<button type="button" id="res_btn" value="R" class="btn btn-light">Research</button>

jQuery

$('#res_btn').on('click', function() {
    var value = $(this).val().toLowerCase();
    $('#table tr:not(:has(th))').filter(function() {
        //line im struggling with   
        $(this).toggle("td:nth-child(1)").text().toLowerCase().includes(value);
        console.log(this);
    });
});

多年来，我一直在尝试寻找类似的问题，但没有一个普遍适用于我的问题。但是，如果您发现其他可能存在相同类型问题的问题，请链接它。

【问题讨论】：

查看有关您使用的不同方法的文档（.toggle()、.text()、.includes()）。看起来你不太明白他们在做什么。
请发布您的table 代码
@Andreas 当然，正确的方法是我需要指导的东西。我尝试了几种替代方法，但找不到合适的组合。 .toggle() 是我用来切换行的可见性的。 .text() 是我用来获取列的文本内容的。但是我不确定.includes()。
.toggle("td:nth-child(1)") 不会“切换”该行。之后的任何事情或多或少都是无操作的，因为它没有做任何有用的事情。
我还有一个input 搜索，它过滤和搜索整个表格，它的工作方式几乎相同，但改为检查.indexOf(inputValue) > -1。我的第一个想法是，我可以做类似的事情，但对于一个专栏，显然不是？

标签： jquery filter html-table match

【解决方案1】：

我通过使用.indexOf() 将列与字符串匹配来解决了这个问题。然后我隐藏了父母并重置可见性，我在.filter() 函数中显示所有tr（不包括th）。

我是这样实现的：

$('#res_btn').on('click', function() {
    var value = $(this).val().toLowerCase();
    $('td:nth-child(1)').filter(function() {
        $('tr:not(:has(th))').show();
        return $(this).text().toLowerCase().indexOf(value);
    }).parent().hide();
});

感谢@Andreas 提供了类似问题的链接。

【讨论】：