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(); 
}); 

但是我見過有一個更優雅（也可能有效）解決方案使用：不是選擇器，但我無法得到它的工作：

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

我怎樣才能得到這個工作使用：不是選擇器，所以如果一行不是包含蘋果，它將被隱藏，留下所有包含蘋果的行。

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>