jQuery选择器删除满足两个条件的表行

时间:2016-10-13 18:38:43

标签: javascript jquery jquery-selectors html-table conditional-statements

当你有一个只在jQuery中满足多个条件时运行的操作时,我试图理解采用了什么技术。我不知道过滤器是否是答案。

在我的示例中,我在页面上有多个表。我想删除满足两个条件的表的行。第一个条件是该行不能是表的第一行(表元素的第一个子行)。第二个条件是行不能应用任何样式(没有声明样式元素)。我对复杂选择器的符号感到困惑。我现在试图超越简单的选择器。

在我的示例中,要使用的表标记为gvBigTable。我有以下内容:

$("#gvBigTable table tbody tr.not('style')").remove();
$("#gvBigTable table tbody tr.not(first-child)".remove();

我想要结合这些条件,以便必须满足这两个条件才能删除行。任何帮助表示赞赏。感谢。

1 个答案:

答案 0 :(得分:1)

您尚未正确使用: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>
&#13;
&#13;
&#13;

更新:根据David Thomas的建议,纯CSS解决方案如下所示。

&#13;
&#13;
table tbody tr:first-child ~ tr:not([style]) { 
    display: none; 
}
&#13;
<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>
&#13;
&#13;
&#13;

如果您不想使用display: none,则可以将选择器table tbody tr:first-child ~ tr:not([style])与jQuery一起使用以删除行。