A Tech Log

October 19, 2008

JQuery and alternating table row colors

Filed under: Development — adallow @ 6:45 am

From http://www.packtpub.com/article/jquery-table-manipulation-part2

Check out the link for more details and more complex examples.

Can be as simple as two lines of code to alternate the background color:

$(document).ready(function() {

$(‘table.sortable tbody tr:odd’).addClass(‘odd’);

$(‘table.sortable tbody tr:even’).addClass(‘even’);


If we declare background colors for the odd and even classes as follows, we can see the rows in alternating shades of gray:

tr.even {

background-color: #eee;


tr.odd {

background-color: #ddd;



Leave a Comment »

No comments yet.

RSS feed for comments on this post. TrackBack URI

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

Blog at WordPress.com.

%d bloggers like this: