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

Question

I have a table containing multiple line defined as follow:

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

With a single jquery line, i would like to hide the all <tr> for which we don't find a provided status value in a <td> element:

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

My code doesn't works, it hide all ceils..

Answer 1

Your code doesn't work because the rows that do have matching cells also have cells without matching values.

You can do it by combining :not and :has to say "find me a tr that doesn't have a descendant with this data-value ":

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

Example:

 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>