So what we want is to apply style to alternate rows in our table. I’m going to use the jQuery :even custom selector to achieve this. This is simple yet very useful.

The Markup

First, let’s start off with a simple accessible table.

<table summary=“Superheros from the X-Men and their powers”>
<caption>X-Men</caption>
<tr>
<th>Superhero</th>
<th>Power</th>
</tr>
<tr>
<td>Cyclops</td>
<td>produces optic blast</td>
</tr>
<tr>
<td>Iceman</td>
<td>cryokinesis</td>
</tr>
<tr>
<td>Storm</td>
<td>weather control</td>
</tr>
<tr>
<td>Wolverine</td>
<td>healing factor</td>
</tr>
</table>

The Style

Next, let’s add a little CSS.

.even { background-color:#eee; }

The even class is all the style you need to display the striping, but I’m going to add some more CSS to make the table look cool.

table { border-collapse:collapse;width:525px; } caption { margin-bottom:10px; } th { background-color:#ddd; } th, td { border:1px solid #ccc;padding:15px; }

The jQuery

Finally, a few lines of jQuery.

$(function() { $(‘tr:even’).addClass(‘even’); });

That’s it, good to go! Thy table now has stripes.

X-Men

Superhero	Power
Cyclops	produces optic blast
Iceman	cryokinesis
Storm	weather control
Wolverine	healing factor

This entry was posted on Wednesday, September 22nd, 2010 at 4:17 am and is filed under jQuery . You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.