Hi Thomas,
Try this I used it before It's soo simple :(the snippet is taken from
"learning JQuery")
*
Styling Alternate Rows*
Two very useful custom selectors in the jQuery library are :odd and :even.
Let's
take a look at how we can use these selectors for basic table striping,
given the following table:
<table>
<tr>
<td>As You Like It</td>
<td>Comedy</td>
</tr>
<tr>
<td>All's Well that Ends Well</td>
<td>Comedy</td>
</tr>
<tr>
<td>Hamlet</td>
<td>Tragedy</td>
</tr>
<tr>
<td>Macbeth</td>
<td>Tragedy</td>
</tr>
<tr>
<td>Romeo and Juliet</td>
<td>Tragedy</td>
</tr>
<tr>
<td>Henry IV, Part I</td>
<td>History</td>
</tr>
<tr>
<td>Henry V</td>
<td>History</td>
</tr>
</table>
Now we can add two classes to the stylesheet—one for the odd rows and one
for
the even:
.odd {
background-color: #ffc; /* pale yellow for odd rows */
}
.even {
background-color: #cef; /* pale blue for even rows */
}
Finally, we write our jQuery code, attaching the classes to the table rows
(<tr> tags):
$(document).ready(function() {
$('tr:odd').addClass('odd');
$('tr:even').addClass('even');
});
At first glance, the row coloring might appear the opposite of what it
should be. However, just as with the :eq() selector, the :odd() and :even()
selectors use JavaScript's native zero-based numbering. Therefore, the first
row counts as 0 (even) and the second row counts as 1 (odd), and so on.
