jquery - 如果 td 不包含文本，则隐藏 tr

Question

如果 tr 的 td 不包含 text2，我想隐藏它。当我使用此代码时：

$('td:contains("text2")').parent().toggle()}))

它隐藏了 td 中包含 text2 的 tr ，但我想隐藏 td 中不包含 text2 的所有表格行，所以我编写了以下代码：

$('td:not(:contains("text2"))').parent().toggle()}))

但它隐藏了所有行。

jsfiddle 示例

Answer 1

您当前遇到的问题是，如果 atd不包含text2，它将隐藏整行，无论兄弟是否td包含文本。

在不更改任何标记的情况下，我能想到的最好的办法是选择td每一行的第一行，然后在 parent 上进行过滤tr：

$('td:first-child').parent('tr:not(:contains("text2"))').toggle();

或者您可以直接在 上过滤tr，省略那些有th元素的（这样你的包含的行th's就不会被隐藏）：

$('tr:not(:has(th)):not(:contains("text2"))').toggle();

这是一个小提琴

Answer 2

它不起作用，因为如果任何列不包含 text2 那么它将隐藏该行。

您可以使用以下内容，但如果条件适用于任何列，则必须区分标题和其他行。

contains()适用于任何后代，因此您可以直接检查 tr 的条件

$('tr:not(.head):not(:contains("text2"))').toggle()

这是更新的JSFiddle

Answer 3

试试这个：

$(document).ready(function(){
    $('#contains').change( function() {
        $('td:contains("text2")').parent().toggle()
    });

    $('#notContains').change( function() {
        $('td').parent().toggle();
        $('td:contains("text2")').parent().toggle();
    });
});

Answer 4

使用此代码进行更改：

你很好，但最初你必须找到元素，所以使用 find...

家长：

获取当前匹配元素集中每个元素的父元素，可选地由选择器过滤。

寻找：

获取当前匹配元素集中每个元素的后代，由选择器、jQuery 对象或元素过滤。

因此，使用此代码进行更改：

用 text2 隐藏 td：

     $(document).find('td:contains("text2")').toggle()}));

隐藏没有 text2 的 td：

     $(document).find('td:not(:contains("text2"))').toggle()}));

这是代码

$(document).ready( 
$('#contains').change( function() {
    $(document).find('td:contains("text2")').toggle()}));
 $(document).ready( 
 $('#notContains').change( function() {

  $(document).find('td:not(:contains("text2"))').toggle()}));

演示

多谢，伙计