Question

我有一张这样的表：

<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文件时删除一些表行。如果用户删除其中一个表行，e.x。：

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

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

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

如何使用JavaScript或JQuery进行操作？

PS：我希望我的桌子（有id = myTable）的每一个trs都有。

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

Answer 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");
    }
});

Answer 2

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

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

从表中删除行以更新类时触发此操作。

还有CSS Selector，但没有广泛支持。

Answer 3

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

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

更新以考虑表ID

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

3 个答案: