使用 jQuery 从表条带化中排除嵌套表

Posted 2023-03-05

【中文标题】使用 jQuery 从表条带化中排除嵌套表

【英文标题】：Exclude nested tables from table striping with jQuery

【发布时间】：2011-11-08 15:56:00

【问题描述】：

我正在尝试从我的表条带中排除嵌套表（使每隔一行具有不同的背景颜色）。这是我对表格进行条带化的代码：

$(".stripeTable tbody tr:odd").addClass("stripe");

我的问题是，如何防止嵌套表的奇数行接收“条带”类？

这是从浏览器生成的代码，我想从嵌套表中删除 class="stripe"。

   <table>
      <tr>
        <td>My Table Cell </td>
      </tr>
      <tr class="stripe">
        <td>
          <table>
            <tr>
              <td>My nested table cell</td>
            </tr>
            <tr class="stripe">
              <td>my nested table cell (remove the stripe!)</td>
            </tr>
          </table>
        </td>
      </tr>
    </table>

【问题讨论】：

stripeTable 类在哪里？

【参考方案1】：

如果只有***表有stripeTable类，只需添加一些子选择器>：

$(".stripeTable > tbody > tr:odd").addClass("stripe");

如果嵌套表也有 stripeTable 类，您可能需要使用另一个子选择器将 .stripeTable 锚定到另一个父元素：

$(".parent > .stripeTable > tbody > tr:odd").addClass("stripe");

【讨论】：

太棒了，谢谢。我在 tbody 之前有一个“>”，但我现在看到它在 tr 之前也需要它。

是的，因为您也嵌套了trs，所以它们会被选中。