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.


The below table’s tbody tag has ec="#eff" oc="#7DAAEA". Like the other “Zebra Table” script, you can also add special classes. The ALA script was very dirty and used unnecessary attribute nodes which did not work in IE 5. This script is way simpler, and works with all W3C DOM browsers. The grey row’s tr has class="special". If any row has a class, the script skips it.
Purple HazeJimi Hendrix
You should be dancingThe Bee Gees
You’re my best friendQueen
I Wish You PeaceThe Eagles
All Along the WatchtowerJimi Hendrix
Funeral For a Friend/Love Lies BleedingElton John
Bat out of HellMeat Loaf
Little LiesFleetwood Mac

The Script

Below is the script that powers the Striped Tables script.
Powered by DCScript
function stripe() {
if (!document.getElementsByTagName || !document.createElement) return;
var x = document.getElementsByTagName("tr");
for (var i=0;i


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
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;