Jquery根据来自不同列的多个值隐藏表行

Question

我想在检查多列中接受的值后隐藏表格行。

表格是：

<table id="my-table>
<tr><td class="name">John</td><td class="lastname">Doe</td></tr>
<tr><td class="name">Ann</td><td class="lastname">Doe</td></tr>
<tr><td class="name">John</td><td class="lastname">Smith</td></tr>
</table>

根据我目前的研究（以及这个post），隐藏除 John Doe 之外的所有内容需要以下 Jquery 短语：

$("#my-table td.name:not(:contains('John')):td.lastname:not(:contains('Doe'))").parent().hide();

但是 Jquery 不喜欢这样说Uncaught Error: Syntax error, unrecognized expression: unsupported pseudo: td

这样做的正确方法是什么？

出于同样的原因，我想了解如何进行更复杂的查询，例如： Hide all rows with 'first name' containing 'a' OR 'b' AND 'last name' containing 'x' OR 'y'.

Answer 1

迭代每个 tr，然后检查每个 first 和 last td。

$( "tr" ).each( function( index, val ){
    if($(this).find("td:first-child").text() == 'John' && $(this).find("td:last-child").text() == 'Doe') {
        $(this).hide();
    }
});

Fiddle

更新：隐藏除 John Doe 以外的所有人

$( "tr" ).each( function( index, val ){
    if($(this).find("td:first-child").text() != 'John'  || $(this).find("td:last-child").text() != 'Doe') {
        $(this).hide();
    }
});

Fiddle

Answer 2

因为:td 不是有效的伪选择器。您可以使用选择器#my-table td.name:not(:contains('John')),#my-table td.lastname:not(:contains('Doe'))。对于 multiple selector，您可以使用 ,。

$("#my-table td.name:not(:contains('John')),#my-table td.lastname:not(:contains('Doe'))").parent().hide();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="my-table">
  <tr>
    <td class="name">John</td>
    <td class="lastname ">Doe</td>
  </tr>
  <tr>
    <td class="name ">Ann</td>
    <td class="lastname ">Doe</td>
  </tr>
  <tr>
    <td class="name ">John</td>
    <td class="lastname ">Smith</td>
  </tr>
</table>