Outputting the stripes server-side, you’d need to add that bit of logic to every table you output. It’s not much code, about 5 rows, but it’s duplication nonetheless and requires testing each table separately. Using JS to modify all tables of say, given class or id, you’d have the logic in just one place, with the benefits of centralized control.

Of course, if you happen to have a method of generating the tables through a single routine in the server-side code, you’d then only have to code the striping once, but a lot of us don’t probably have that luxury always, especially with legacy apps.

Using PHP would obviously work without JS, so it all depends on can you trust the user to have JS on.

The project I am working on involves hierarchical data in a table, arranged as a series of ‘entry’ rows and ‘folder’ rows. Clicking on a folder row hides or shows the corresponding hierarchy of entries or subfolders. This was easy enough, but I wanted to use this class to recolour the table rows dynamically (as hiding a bunch of rows may throw off the zebra effect).

Modifying the code so that it checked for tr.style.display != ‘none’ was trivial, as was adding the extra voodoo to make the zebra effect work independently of row number, but then I found the code did not work reliably after more than one call.

The problem was actually something I should have noticed from the start: zerbarize() does tr.addClass(klass).addEvents( … ); *but it doesn’t remove the style classes or events before doing so*, so each call to zebraisze() is just adding classes and event handlers rather than replacing the existing ones!

In the end, I used the following code:

var options = this.options, klass = pos % 2 ? options.cssEven : options.cssOdd;

// We might not know which class we have (if any), so check for either
if(tr.hasClass(options.cssEven)) {
tr.removeClass(options.cssEven);
} else if(tr.hasClass(options.cssOdd)) {
tr.removeClass(options.cssOdd);
}

// This is rather harsh, but provided the only events get added in zebraize()
// it should be safe enough…
tr.removeEvents();

//start the events!
tr.addClass(klass).addEvents(….. etc….

I can link you to a pastebin of the complete modified version if you’re interested.

I tried to make but without success :/

I would use <thead> for the headers and <tbody> for the data rows, and that way save the <th> check.

eg: $(“myTable tr:odd).css(“background-color”, “#000″); would colour the odd rows.

I’ve made a rough example with mootools here: http://ljd.dk/loot/mootables.html. I’ve only tested in FF3, IE8 and IE8 compatability view, but so far it seems to works just like yours with less code.

Maybe I’m misunderstanding something, but imho it wouldbe easier to use CSS3 selectors. Thanks for a great blog!