Javascript Jquery隐藏不包含值的表列

我试图隐藏表中不包含搜索值的行

这项工作：

<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>

但我发现有一种更优雅、可能更有效的解决方案，使用：非选择器，但我无法让它工作：

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

如何使用：not选择器使其工作，以便如果一行不包含苹果，它将被隐藏，保留所有包含苹果的行

JS Fiddle:

因为first td在任何一行中都不包含苹果，它将选择所有first td，因此它将隐藏其父项。所以你需要使用tr

匹配文本可以直接显示在选定元素中、该元素的任何子元素中或其组合中。与属性值选择器一样，括号内的文本：contains可以写为裸字，也可以用引号括起来。文本必须有匹配的大小写才能选择。取自

$'mybutton2'。单击函数{ $'.mytable tr:not:containsapples.hide； }; 1001 苹果 1002 香蕉 按钮

---

按钮2您知道如何最好地执行此操作以使其不区分大小写吗？

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