隐藏所有tr元素不包含带有值的td

Question

我有一个包含多行定义如下的表：

<tr class="treegrid-1 treegrid-parent-0 trCusto" >
    <td data-column="Status" class="tdCusto cellGreen" style="text-align: center; width: 200px; " data-value="Supported">Supported</td>
    <td data-column="Reference" class="tdCusto" style="width: 100px; " data-value="123455">123455</td>
</tr>

使用单个jquery行，我想隐藏所有<tr> ，我们在<td>元素中找不到提供的状态值：

$("#myTable").find("[data-value!='"+newStatusSelected+"']").parent().hide();

我的代码不起作用，它隐藏所有细胞..

Answer 1

您的代码不起作用，因为具有匹配单元格的行也具有没有匹配值的单元格。

你可以通过组合来实现:not和:has说“找到一个没有这个data-value的后代的tr”：

$("#myTable").find("tr:not(:has([data-value='" + newStatusSelected + "']))").hide();

例：

 var newStatusSelected = "Supported"; $("#myTable").find("tr:not(:has([data-value='" + newStatusSelected + "']))").hide(); 

 <table id="myTable"> <tbody> <tr class="treegrid-1 treegrid-parent-0 trCusto"> <td data-column="Status" class="tdCusto cellGreen" style="text-align: center; width: 200px; " data-value="Supported">Supported</td> <td data-column="Reference" class="tdCusto" style="width: 100px; " data-value="123455">123455</td> </tr> <tr class="treegrid-1 treegrid-parent-0 trCusto"> <td data-column="Status" class="tdCusto cellGreen" style="text-align: center; width: 200px; " data-value="Foo">Foo</td> <td data-column="Reference" class="tdCusto" style="width: 100px; " data-value="123455">123455</td> </tr> </tbody> </table> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>