Jquery 隐藏 table 列不包含值

Question

如果不包含搜索值，我试图隐藏 table 中的一行。

这个有效：

<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 Fiddle: https://jsfiddle.net/ryy3tvob/

Answer 1

因为第一个 td 不包含任何行中的 apple 并且它将 select 所有第一个 td 所以它将隐藏它的父级。所以你需要使用 :contains() 作为 tr

The matching text can appear directly within the selected element, in any of that element's descendants, or a combination thereof. As with attribute value selectors, text inside the parentheses of :contains() can be written as a bare word or surrounded by quotation marks. The text must have matching case to be selected. ( Taken from 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>

Jquery 隐藏 table 列不包含值

Jquery hide table column not containing value

javascript

jquery

jquery-selectors