CODEWITHSUNDEEP
javascriptjqueryhtml
wawanopoulos
wawanopoulos

Reputation: 9794

Hide all tr elements doesn't containing a td with a value

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

Upvotes: 1

Views: 299

Answers (1)

T.J. Crowder
T.J. Crowder

Reputation: 1074168

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>

Upvotes: 3

Related Questions