如何遍历表并为trs的tds定义类？

Question

I have a table like that:

<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" makes row gray background class="styleEven" makes row background blue. I iterate over that table with Struts2 and define classes but user can remove some of table rows when he sees that HTML file. If user remove one of the table row, ex :

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

Colors of background was gray, blue, gray. However it is gray, gray now(because user removed a tr which includes classEven tds).

All in all what I want is iterate over that table again and defining classes styleOdd, styleEven, styleOdd, styleEven... again.

How can I do it with JavaScript or JQuery?

PS: I want to it for my table(which has id=myTable)'s every tds of trs.

EDIT: I want it except for the first tr(and it's tds).

Answer 1

You can use :even and :odd , but then you would iterate over the table rows twice. That might lead to unacceptable performance if your table has many rows.

I'd suggest using each() instead:

$("#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

You can use the :odd selector to target odd rows. (there is also a :even selector)

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

Trigger this when removing a row from the table to update classes.

There are also both CSS Selector but not widely supported.

Answer 3

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

I believe you could also do it automatically using CSS. Although it requires a fairly modern browser.

Updated to take into account the table ID