DCScript© Stripe Tables

This script will stripe your tables. The colors come from custom attributes in the tbody tag. This will also work in IE 5.

Example

The below table’s tbody tag has ec="#eff" oc="#7DAAEA". You can add special classes, and the script works with all W3C DOM browsers.
The grey row’s tr has class="special". If any row has a class, the script skips it.

Title	Artist
Purple Haze	Jimi Hendrix
You should be dancing	The Bee Gees
You’re my best friend	Queen
I Wish You Peace	The Eagles
All Along the Watchtower	Jimi Hendrix
Funeral For a Friend/Love Lies Bleeding	Elton John
Bat out of Hell	Meat Loaf
Little Lies	Fleetwood Mac

The Script

Below is the script that powers the Striped Tables script.

function stripe() {
if (!document.getElementsByTagName || !document.createElement) return;
var x = document.getElementsByTagName("tr");
for (var i=0;i<x.length;i++) {
if (!x[i].parentNode.getAttribute("oc") || x[i].className || x[i].parentNode=="THEAD") continue;
var col = (i%2==0) ? x[i].parentNode.getAttribute("ec") : x[i].parentNode.getAttribute("oc");
//Uncomment the line below if you want to use specific classes (change the names if you want)
//var col = (1%2==0) ? "erow" : "orow";
x[i].style.backgroundColor = col;
}
}
window.onload = stripe;

Explanation

This script is fairly simple. First we check if the browser supports the W3C DOM. If it doesn’t, we end the function.
Then we get all tr tags and loop through them.

function stripe() {
if (!document.getElementsByTagName || !document.createElement) return;
var x = document.getElementsByTagName("tr");
for (var i=0;i<x.length;i++)

Then we also see if the tbody tag has the oc attribute, which denotes whether the table should be striped or not.
If it doesn’t have that attribute or the tr has a class we skip this row.
Then we find out which color should be applied to the row. If it’s an even row we give it the value of the ec attribute.
If it’s and odd row we give the value of the oc attribute.

if (!x[i].parentNode.getAttribute("oc") || x[i].className || x[i].parentNode=="THEAD") continue;
var col = (i%2==0) ? x[i].parentNode.getAttribute("ec") : x[i].parentNode.getAttribute("oc");
x[i].style.backgroundColor = col;

Finally we set the onLoad event handler and we’re flyin’

window.onload = stripe;