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, e.x. :

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