jQuery 选择器删除满足两个条件的 table 行
jQuery Selectors Removing table rows that meet two conditions
我试图了解当您有一个仅在 jQuery 中满足多个条件时才运行的操作时采用的技术。我不知道过滤器是否是答案。
在我的示例中,我在一个页面上有多个 table。我想删除满足两个条件的 table 的行。第一个条件是该行不能是 table 的第一行(table 元素的第一个子元素)。第二个条件是该行不得应用任何样式(未声明样式元素)。我对复杂选择器的表示法感到困惑。我现在正在尝试超越简单的选择器。
在我的示例中,要使用的 table 标记为 gvBigTable。我有以下内容:
$("#gvBigTable table tbody tr.not('style')").remove();
$("#gvBigTable table tbody tr.not(first-child)".remove();
我想合并这些条件,以便必须同时满足这两个条件才能删除该行。任何帮助表示赞赏。谢谢
您没有正确使用:not()
。你可以像下面那样做。
$("table tbody tr:not(':first-child'):not('[style]')").remove();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td>111</td>
</tr>
<tr>
<td>222</td>
</tr>
<tr style="">
<td>333</td>
</tr>
<tr>
<td>444</td>
</tr>
</tbody>
</table>
更新: 根据 David Thomas 的建议,纯 CSS 解决方案如下所示。
table tbody tr:first-child ~ tr:not([style]) {
display: none;
}
<table>
<tbody>
<tr>
<td>111</td>
</tr>
<tr>
<td>222</td>
</tr>
<tr style="">
<td>333</td>
</tr>
<tr>
<td>444</td>
</tr>
</tbody>
</table>
如果您不想使用 display: none
,那么您可以使用选择器 table tbody tr:first-child ~ tr:not([style])
和 jQuery 来删除行。
我试图了解当您有一个仅在 jQuery 中满足多个条件时才运行的操作时采用的技术。我不知道过滤器是否是答案。
在我的示例中,我在一个页面上有多个 table。我想删除满足两个条件的 table 的行。第一个条件是该行不能是 table 的第一行(table 元素的第一个子元素)。第二个条件是该行不得应用任何样式(未声明样式元素)。我对复杂选择器的表示法感到困惑。我现在正在尝试超越简单的选择器。
在我的示例中,要使用的 table 标记为 gvBigTable。我有以下内容:
$("#gvBigTable table tbody tr.not('style')").remove();
$("#gvBigTable table tbody tr.not(first-child)".remove();
我想合并这些条件,以便必须同时满足这两个条件才能删除该行。任何帮助表示赞赏。谢谢
您没有正确使用:not()
。你可以像下面那样做。
$("table tbody tr:not(':first-child'):not('[style]')").remove();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td>111</td>
</tr>
<tr>
<td>222</td>
</tr>
<tr style="">
<td>333</td>
</tr>
<tr>
<td>444</td>
</tr>
</tbody>
</table>
更新: 根据 David Thomas 的建议,纯 CSS 解决方案如下所示。
table tbody tr:first-child ~ tr:not([style]) {
display: none;
}
<table>
<tbody>
<tr>
<td>111</td>
</tr>
<tr>
<td>222</td>
</tr>
<tr style="">
<td>333</td>
</tr>
<tr>
<td>444</td>
</tr>
</tbody>
</table>
如果您不想使用 display: none
,那么您可以使用选择器 table tbody tr:first-child ~ tr:not([style])
和 jQuery 来删除行。