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>

根據我的研究，到目前為止（這后 ），隱藏所有但李四需要下列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();
    }
});

小提琴

更新：隱藏除John Doe之外的所有人

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

小提琴

Answer 2

因為:td不是有效的偽選擇器。 您可以使用選擇器#my-table td.name:not(:contains('John')),#my-table td.lastname:not(:contains('Doe')) 。 對於多個選擇器，您可以使用, 。

 $("#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>