javascript - 隐藏所有不包含具有值的 td 的 tr 元素

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();

我的代码不起作用，它隐藏了所有的 ceils..

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>