如何迭代表并为 trs 的 tds 定义类？答案

【问题标题】：How to iterate over table and define class for tds of trs?如何迭代表并为 trs 的 tds 定义类？
【发布时间】：2011-07-08 00:14:46
【问题描述】：

我有一张这样的桌子：

<table id="myTable" cellspacing="0" cellpadding="10" border="0" width="100%">
<tbody>
....
<tr style="color: blue;" id="bankRecord377">      
  <td align="center" class="styleOdd"> <input type="checkbox" value="377" name="377"></td>
  <td align="center" class="styleOdd">377</td>
  <td align="center" class="styleOdd"></td>
  <td align="center" class="styleOdd">391</td>
</tr>
....
<tr style="color: blue;" id="bankRecord386">     
  <td align="center" class="styleEven"> <input type="checkbox" value="386" name="386"></td>
  <td align="center" class="styleEven">386</td>
  <td align="center" class="styleEven"></td>
  <td align="center" class="styleEven">396</td>
</tr>
...
<tr style="color: blue;" id="bankRecord322">     
  <td align="center" class="styleEven"> <input type="checkbox" value="322" name="386"></td>
  <td align="center" class="styleEven">322</td>
  <td align="center" class="styleEven"></td>
  <td align="center" class="styleEven">314</td>
</tr>
...
</tbody>
</table>

class="styleOdd" 使行背景为灰色 class="styleEven" 使行背景为蓝色。我使用 Struts2 遍历该表并定义类，但用户在看到该 HTML 文件时可以删除一些表行。如果用户删除表格行之一，例如：

<tr style="color: blue;" id="bankRecord386">
...
</tr>

背景颜色为灰色、蓝色、灰色。但是它现在是灰色的，灰色的（因为用户删除了一个包含 classEven tds 的 tr）。

总而言之，我想要的是再次遍历该表并再次定义类 styleOdd、styleEven、styleOdd、styleEven...。

我怎样才能用 JavaScript 或 JQuery 做到这一点？

PS：我想为我的表（它有 id=myTable）的每个 tds 的 trs。

编辑：我想要它，除了第一个 tr（它是 tds）。

【问题讨论】：

标签： javascript jquery html iteration

【解决方案1】：

您可以使用:even 和:odd，但随后您将遍历表行两次。如果您的表有很多行，这可能会导致无法接受的性能。

我建议改用each()：

$("#myTable tr").each(function(index, row) {
    var $cells = $("td", row);
    if (index & 1) {
        // Odd.
        $cells.removeClass("styleEven").addClass("styleOdd");
    } else {
        // Even.
        $cells.removeClass("styleOdd").addClass("styleEven");
    }
});

【讨论】：

性能对我来说很重要。我的表可能有很多行。我会试试你的建议。
它可以工作，但还有一件事。除了第一个 tr，我该怎么做？
@kamaci，使用$("#myTable tr:gt(0)") 而不是$("#myTable tr")。
@Frédéric Hamidi 它将类添加到 trs？
@kamaci，不，它修改了<td> 元素（看看$cells）。根据您的问题，这是设置课程的地方。

【解决方案2】：

您可以使用:odd 选择器来定位奇数行。（还有一个:even 选择器）

$('.td:odd').class('odd');

从表中删除一行以更新类时触发此事件。

也有CSS Selector，但没有得到广泛支持。

【讨论】：

【解决方案3】：

$('#myTable tr:odd td').toggleClass('styleOdd', true).toggleClass('styleEven', false);
$('#myTable tr:even td').toggleClass('styleOdd', false).toggleClass('styleEven', true);

我相信您也可以使用 CSS 自动完成。虽然它需要一个相当现代的浏览器。

已更新以考虑表 ID

【讨论】：