Stripe Tables

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



Over 2000+ free Javascript
at JavaScriptBank.com Website
Sampled by JavaScriptBank.com

Example

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.
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. 
/*
Powered by DCScript
http://geocities.com/seanmhall2003/SeanSoft/ 
*/
function stripe() {
if (!document.getElementsByTagName || !document.createElement) return;
var x = document.getElementsByTagName("tr");
for (var i=0;i

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