21 IE Only

For IE only intranets:

.zebra tr { background: [removed]this.rowIndex%2 == 1?’#F0F0F0’:’#FFF’);
}

/eelco

posted at 02:42 am on March 6, 2004 by eelco

22 Instead of applying the colours with JS

Why don’t you apply the classes?

window.onload = function() { var trs = document.getElementByTagName(‘tr’); for (var i = 0; i < trs.length; i++) if (i%2) { trs[i].addAttribute(‘class’, ‘odd’) }
}

That won’t work in IE, but there are alternate methods to addAttribute.

posted at 06:55 am on March 6, 2004 by David House

23 what about lists ?

This article is something that I have been looking out for a long time. Unfortunately I switched from tables to lists using css on my new page (not published jet).

Probably it is not difficult to change the script to lists, but I have no idea how to do that.

Would be great if someone could change that script.

Besides that I would be interested if the same thing could be done server based ? Important because I know too many people who switch of JS completely.

Matthias Pospiech

posted at 09:02 am on March 6, 2004 by Matthias Pospiech

24 Weakerthans...

Isn’t it a Plea From a Cat Named Virtue?

posted at 10:25 am on March 6, 2004 by rgw

25 className

Use the className property for setting classes. Don’t use addAttribute.

posted at 04:00 pm on March 6, 2004 by Dante-Cubed

26 Cool article

I’ve been looking for different ways to display tabular data and I’ve often used the code from http://www.tbrown.org/ideas/tabularlist/ to eliminate the table completely. This will work well in conjunction with that.

posted at 06:10 am on March 7, 2004 by Lyle Konkiel

27 Nice stuff, could be a bit more efficient.

First of all, nice work.
I was thinking about writing some script like this a while ago but never came to it.
After reviewing your code I figured that it could be a bit more efficient though, as like other mentioned, with the use of classes. Also I think that the script iterates one level too many, why not just give the tr a classname and therin specifying the background color for the individual td’s.

I’ve rewritten the script a bit, it iterates through all the tables in the page (I don’t use the id part, since I want all tables ‘zebra-d’).

The script can be found at http://validweb.nl/zebra.txt

The CSS I use looks like this:
table tr.even td{ background-color: color;
}

posted at 11:14 am on March 7, 2004 by Jop

28 Zebra plus SortTable

Has anyone managed to get this to work together with Stuart Langridge’s SortTables? By together I mean, when you click the header to resort the table, have the zebra function rescan the table so that the effect remains.

If anyone manages this please let me know.

I tried calling stripe() from within various points of the sortable code, but I can’t get it to call it.

posted at 03:12 pm on March 7, 2004 by Matt Fletcher

29 Hovers can work

It’s kind of neat to stripe a table, then have a third color show up onMouseOver.

It’s pretty straight forward from the concepts covered here, but PHPMyAdmin on Sourceforge has a good example in it’s interface. In fact, PHPMyAdmin has functionality where you can click a row, or many rows, and have it stay that alternate 3rd color, which is nice for picking out records in large tables/databases.

posted at 03:59 pm on March 7, 2004 by Vince Kenney

30 just a little OT question

Why did you use multiple <TBODY>‘s in the example. A table could just have one BODY or am I wrong?

posted at 03:54 am on March 8, 2004 by Edwart Visser