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>

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

1 个答案: