0

我有一个包含多个 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 选择器。我做错了什么？

谢谢。

4

2 回答 2

4

如果我正确理解了这个问题，这可能就是你想要的：

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

jsfiddle

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

于 2013-01-15T23:19:03.350 回答
1

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

解决方案看起来更像

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

小提琴

于 2013-01-15T23:44:15.577 回答