Question

我要实现的目标

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

我得到了 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);
    });
});

我一直在尝试寻找类似年龄的问题，但一般都不适用于我的问题。但是，如果您发现其他可能具有相同类型问题的问题，请进行链接。

Answer 1

我通过使用.indexOf()将列与字符串匹配来解决了这个问题。然后，我隐藏了父母，并重置了可见性，我在tr函数中显示了所有.filter()（不包括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链接到类似问题。

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

1 个答案: