scriptygoddess

08 Aug, 2009

Adding alternate row styles to a table with JQuery

Posted by: Jennifer In: jquery

JQuery's simplicity is so wonderful and powerful. Here's a perfect example. If you have a table, and you want to alternate the row colors. To do so, all you need is this:

$(document).ready(function() {
$("table.striped tr:nth-child(even)").addClass("altrow");
});

Then, just add class="striped" to your table tag, and jquery will automatically apply add the class "altrow" to every other row. (If you want to change which row it starts with – change 'even' to 'odd' in the code above).

Then just include a style for your altrow:

table.striped tr.altrow td {
background-color: #ccc;
}

And to think I used to do that manually. OY!

Related posts:

  1. Adding a block of HTML to a WordPress post One problem with the WYSIWYG editor in WordPress is that...

Related posts brought to you by Yet Another Related Posts Plugin.

1 Response to "Adding alternate row styles to a table with JQuery"

1 | Dan

August 28th, 2009 at 12:30 am

Avatar

Thanks. It's a nice tip… was doing that manually myself for a while now..

Comment Form

Featured Sponsors

About


Advertisements