JavaScript Zebra Stripes: Alternate Background Colors on Tables and Lists
Love it or hate it, alternating background colors is a common design request for web designers. If you maintain a site of static HTML files, this "zebra striping" effect can become time consuming and tedious. Even if you use a content management system or a server side language, automation is your friend. This script is the automation you want.
There are tons of similar scripts on the Internet, and all do a great job. I've found they have some short comings. I don't always just want to alternate background colors on table rows. I often do not want cells in the table header and footer to have alternating colors either. Things get real messy when I want alternating colors on list items, and especially definition lists. This script package seeks to solve all these problems.
Browser Support
All standards compliant browsers are supported, as well as Internet Explorer version 5.0 and newer. If the browser supports the *.getElementsByTagName
method, then the browser supports this script. This is also safe to use
with any pre existing JavaScript library or framework. It packages all
the related functions into an object called stripes.
As long as you don't have a global variable or function named
"stripes," this is safe to use, and since it utilizes only standard DOM API calls, no additional JavaScript libraries are required.
Using the stripes functions
Usually
you'll want some sort of JavaScript event to kick things off. I
recommend the onload event if you don't use a JavaScript framework like
Mootools or jQuery. A simple function call in the onload attribute of the body tag will suffice:
<body onload="stripes.execute();">
For those who like unobtrusive JavaScript, you can add this to the window.onload function:
window.onload = function() {
stripes.execute();
};
The stripes.execute() function will parse the entire
document object model. For very large HTML files, you might not want
the function parsing the entire DOM tree. You can specify a root DOM
element from which to start searching by passing an HTML tag Id or DOM
node reference to the stripes.execute() function. If no argument is passed, or the Id passed does not exist in the HTML document, then the document element is used.
// Only search in <div id="content">
window.onload = function() {
stripes.execute( "content" );
};
/* --- OR --- */
window.onload = function() {
var contentNode = document.getElementById( "content" );
stripes.execute( contentNode );
};
How it works
The
only thing this script package does is change class names on DOM node
elements. For tables, a class name is assigned to the <tr> tag.
For unordered and ordered lists, the class name is assigned to the
<li> tag. Lastly, for definition lists the class name is assigned
to the <dt> and <dd> tags. All you need to do is add style
rules to your CSS.
The script comes preprogrammed with two class
names. Even rows or list items are given the class "rowA". Odd rows or
list items are given the class "rowB". You can easily change the class
names in the JavaScript source code. Below is a snippet showing you
where you can change these default class names:
window.stripes = {
stripeRowEven : "rowA",
stripeRowOdd : "rowB",
stripeParentClass : "stripes",
...
};The stripeRowEven and stripeRowOdd
properties contain the class names assigned to table rows, list items,
and definition terms and descriptions. The third property, stripeParentClass,
is the class name the script will search for when making the zebra
stripes. As mentioned earlier, this script works for tables, unordered
lists, ordered lists and definition lists:
HTML Structure Supported for TABLEs
HTML Structure for Lists
You'll notice that with the <dl> tags you can specify more
than one <dt>, and more than one <dd> per definition term.
After the script runs, the tables and lists will be given this HTML
structure:
Tables, after scripts.execute()
Lists after stripes.execute()
Styling the zebra stripes with CSS
With a small amount of CSS, you can style your zebra stripes.
.rowA {
background-color: #f0f0f0;
}
.rowB {
background-color: #d0d0d0;
}You can change how tables and lists are displayed by using different CSS selectors:
tr.rowA {
background-color: #f0f0f0;
}
tr.rowB {
background-color: #d0d0d0;
}
li.rowA {
background-color: #fccccc;
}
li.rowB {
background-color: #dccccc;
}
dt.rowA {
background-color: #000;
color: #fff;
}
dd.rowA {
background-color: #505050;
color: #fff;
}
dt.rowB {
background-color: #ccc;
color: #000;
}
dd.rowB {
background-color: #d0d0d0;
color: #000;
}Download the stripes JavaScript source code
- Click on the box below to highlight the code.
- Copy it.
- Paste it into a blank text file.
- Save it as
package.stripes.js - Include it in your HTML documents using a
<script src="">tag.
Who can use this script
The short answer? Anyone. It's released under the LGPL license and is free for commercial and non commercial use. Let's face it, this isn't ground breaking stuff here, so copy it. Distribute it. Use it. But always include some form of recognition and never claim it as your own. If you feel so inclined, link back to this page. If you have comments, suggestions or problems, post them below.