表中*行组*的 JQuery 交替颜色

Posted 2023-05-09

【中文标题】表中*行组*的 JQuery 交替颜色

【英文标题】：JQuery alternate colors of *groups of rows* in a table

【发布时间】：2012-12-30 04:38:03

【问题描述】：

我有一个包含多个 TBODY 元素的表（一年中每个月一个），并且希望在 TBODY 元素内交替使用行颜色。

为了说明，我有一个具有以下基本结构的表：

<table>
  <tbody>
    <tr>
      <th>October</th>
      <th>Total</th>
    </tr>
    <tr>
      <td>Item 1</td>
      <td>500</td>
    </tr>
    <tr>
      <td>Item 2</td>
      <td>1000</td>
    </tr>
    <tr>
      <td>Item 3</td>
      <td>1400</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <th>November</th>
      <th>Total</th>
    </tr>
    <tr>
      <td>Item 1</td>
      <td>800</td>
    </tr>
    <tr>
      <td>Item 2</td>
      <td>400</td>
    </tr>
    <tr>
      <td>Item 3</td>
      <td>200</td>
    </tr>
  </tbody>
  ... a <tbody> for all 12 months ...
</table>

还有下面的 JQuery 调用：

<script type="text/javascript">
    $(function () 
        $("table > tbody > tr:even").addClass("alternate-row");
    );
</script>

但是发生的情况是 JQuery 将整个表视为一个逻辑组，并将备用行类应用于每个奇数行无论 TBODY 位置如何。

换句话说，我想要的是：

October (normal color)
  Item #1 (normal color)
  Item #2 (alt color)
  Item #3 (normal color)
November (normal color)
  Item #1 (normal color)
  Item #2 (alt color)
  Item #3 (normal color)
... etc

我用上面的 JQuery 得到的是：

October (alt color)
  Item #1 (normal color)
  Item #2 (alt color)
  Item #3 (normal color)
November (alt color)
  Item #1 (normal color)
  Item #2 (alt color)
  Item #3 (normal color)
... etc

换句话说，由于某种原因，它无法识别 TBODY 选择器。我做错了什么？

谢谢。

【问题讨论】：

这很正常，因为 $("table > tbody > tr:even") 返回 TBODY 中的所有 TR，而 TBODY 本身就在 TABLE 中。 JQuery 不会对您的 TR 与月份做任何区分。您必须制作更复杂的样式。您可以使用 $("table > tbody").each() 迭代您的 TBODY，然后在 each 中创建一个子函数来管理当前 TBODY 的所有 TR

【参考方案1】：

如果我对问题的理解正确，这可能就是您想要的：

$("table > tbody").each( function() 
    $("tr:even:not(:first)", this).addClass("alternate-row");
 );

jsfiddle

您的代码的问题是一次选择所有 TR。

【讨论】：

这不是问题。我的意思是 Dave 的代码运行良好，它按预期选择偶数行。

@AlecTMH 行应在单个tbody 范围内交替。如果你add one row，我认为结果不是戴夫想要的。

好吧，我明白你的意思了。

就是这样。谢谢！

【参考方案2】：

看 OP 的原版“我想要什么”

解决方案看起来更像

$(document).ready(function () 
  $("tbody").find("tr:even:not(:first)").addClass("alternate-row");
);

Fiddle