Back in December '05, Patrick published on 24 ways a more generic Zebra Tables script. I added a couple of nice features to it.
I found this technique very usefull in quite a few projects. It's not that hard to understand what it does. It simply assigns class names from a list of classes to certain child elements of a parent element (e.g. rows in tables, list items in lists, etc.). The original version, although usefull, lacked a couple of things, that I think would make it even more attractive to a web application.
Multiple parent class names support
First of all the version Patrick presented had a minor bug, if you will call it like that. If the parent element you were trying to "strip" using the function had more than one class defined, it did not work. For example if you had:
<table class="striped extra">
trying to call the method in the following manner:
striper('table', 'striped', 'tr', 'odd,even');
would not work because of the class names checking method.
Not any more! It was easily fixed by replacing the following code:
(currentParent.className == parentElementClass)
with this one:
(new RegExp('\\b' + parentElementClass + '\\b').test(currentParent.className))
Hover classes
Another nice thing for web apps is the hover indicator, when the item below the cursor is highlighted. I've implemented this into the striper method. Now you can give it an optional fifth argument, which will be a comma separated list of classes that will be applied to the children elements when the mouse is over them. This way you can make the following call:
striper('table', 'striped', 'tr', 'odd,even', 'oddHover,evenHover');
Of course, you can use the CSS2 :hover pseudo-class, but I doubt you will get it to work in IE without any other helping scripts.
See it working
To see what I talked about here, view the example page.
Feel free to download the all new striper.js or striper.zip [2k] and use it as you wish. It is backwards compatible with the original version.
Update 22nd May '06: There was an issue when you did not want any hover effects. If you don't need hover effects, ommit or declare as false or null the last parameter.
Comments
at 20:50 on 22/May/2006
The safest way is to declare the last parameter as false or null, or don't passed all along.
I've also fixed the script in case you don't want hover classes to not apply the events for hovering over the elements. Download the script again from the same location.
at 16:19 on 22/May/2006
Comment by Jesper
I have been trying it and in the tables where I do not want any hover just the stiped look I set it up like this:
striper('table', 'striped', 'tr', 'lightColor,darkColor', '');
Is this correct?
I very often get error where one of the darkColor rows in the table have a hoover behaviour. It should be darkColor but its white and when I move the cursor over it it turns into darkColor and when removing the cursor the color returns to lightColor (which is white). Should I call this method differently?
striper
('table', 'striped', 'tr', 'lightColor,darkColor', '');
Regards
/Jesper