Jquery隐藏不包含值的表列

Question

如果表中不包含搜索值，我试图隐藏该行。

这有效：

<table class="mytable">
    <tr>
        <td>1001</td>
        <td>apples</td>
    </tr>
    <tr>
        <td>1002</td>
        <td>bananas</td>
    </tr>
</table>
<button id="mybutton">Button</button>
<button id="mybutton2">Button2</button>

这将通过隐藏所有行，然后显示我们想要的行来实现：

$('#mybutton').click(function(){
    $('.mytable td').parent().hide();
    $('.mytable td:contains("apples")').parent().show();
});

但我已经看到有一个使用 :not 选择器的更优雅（并且可能更有效）的解决方案，但我无法让它工作：

$('#mybutton2').click(function(){
    $('.mytable td:not(:contains("apples"))').parent().hide();
});

我怎样才能使用 :not 选择器来完成这个工作，这样如果一行不包含苹果，它将被隐藏，留下包含苹果的所有行。

JS 小提琴：https://jsfiddle.net/ryy3tvob/

Answer 1

因为第一个td不包含apple在任何行中，并且它将首先选择所有行td，因此它将隐藏其父行。所以你需要:contains()使用tr

匹配文本可以直接出现在所选元素中、该元素的任何后代中或其组合中。与属性值选择器一样，:contains() 括号内的文本可以写为裸词或用引号括起来。文本必须具有匹配的大小写才能被选择。（取自https://api.jquery.com/contains-selector/）

$('#mybutton2').click(function() {
  $('.mytable tr:not(:contains("apples"))').hide();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table class="mytable">
  <tr>
    <td>1001</td>
    <td>apples</td>
  </tr>
  <tr>
    <td>1002</td>
    <td>bananas</td>
  </tr>
</table>
<button id="mybutton">Button</button>
<button id="mybutton2">Button2</button>