bartts…not quite “this same article”, now is it? it’s a rough translation of the original “zebra tables” one.

If you change line 29 to

then you can do something like this

and it will match. This lets you apply more than one class to your parent element.

For brazilian people, this same article in Brazilian portuguese, with inclusion of “sort table”. http://ruf.rockgrafia.com/?art_id=52

This script could very easily have been modified to allow the input of an Object or Id as well as a tag name in the first parameter, just to make it possible to apply it on a single element instead of all lists, all tables etc.

otherwise, good article

Just wondering—might it be possible for someone to compile all of these articles into a zip file or pdf complete with the graphics, scripts, etc. for us to download and keep on hand for future reference? I have enjoyed them so far and would really like to have them for easy reference.

It will be nice when CSS3 gets supported widly enough to use

tr:nth-child(even) { background-color : #eee; }

instead of the javascript approach. Until that time though, this method is very useful.

I stripe my tables using Behaviour combined with cssQuery (for CSS3 selector support) to apply the className “even” to “tr:nth-child(even)”s, while changing the background colour in the css file (using the .even {...}).

Here comes my 2 cents…

I made an article based on Miller’s ZebraTables on my blog (portuguese).

And the final conclusion comes here

And if you wanna sort the values…

:)

You can avoid the extra function definition (which, besides looking clumsy, puts an unnecessary variable in your global namespace) to attach the call to striper() to the onload event, you can use an anonymous function like so:

Also, if you have existing onload events, you can check out Simon Willison’s tutorial on how to avoid overwriting them:

Out of curiosity how does this scale for a table of 100 rows? 1000 rows? Just curious – I’ve tinkered with the JS solution before and it didn’t scale well – resorted to server-side ASP/PHP…

This is awesome. I’ve been using the zebra code to stripe the tables on my tennis team’s site, and it’s always been a PITA to remember to set the ID and update the onload function with any new tables I add. Not only that, but the zebra forces you to put style information in the call to the function; here, it’s in the stylesheet where it belongs. Thanks for a great timesaver!

john, if you do have the means to do it server-side i’d always go for that.

what do you mean exactly with your query on scaling? are you wondering about how long it would take to execute and/or slow the browser down?

Thanks Patrick for finally getting this out the door. I guess you could say that I was a beta tester of this script ages ago. It’s great. It provides so much flexibility.

I’ve used it on a heavy traffic intranet with some pretty huge tables. So far, there has been absolutely no performance issues.

Enjoy the new candy cane striping joy!

candy cane! darn, and there i was trying desperately to come up with a christmassy angle for the demo…obvious in hindsight.

Strangely, it seems to work for tables but i didn’t manage to get it to work with ULs…