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

如何使用：not selector使这个工作正常工作，这样如果一行不包含苹果，它将被隐藏，留下所有包含苹果的行。

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

Answer 1

因为第一个td在任何行中都不包含apple，它会先选择所有td所以它会隐藏它的父级。因此，您需要对tr

使用 :contains()

匹配的文字可以直接显示在所选元素中，在任何元素的后代中，或其组合。与属性值选择器一样，括号内的文本：contains（）可以写为单词或用引号括起来。文本必须具有匹配的案例才能被选中。（摘自https://api.jquery.com/contains-selector/）

＆＃13;

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

＆＃13;

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

＆＃13;

Jquery隐藏表列不包含值

1 个答案: