Splintered Striper

Back in March 2004, David F. Miller demonstrated a little bit of DOM scripting magic in his A List Apart article Zebra Tables.

His script programmatically adds two alternating CSS background colours to table rows, making them more readable and visually pleasing, while saving the document author the tedious task of manually assigning the styling to large static data tables.

Although David’s original script performs its duty well, it is nonetheless very specific and limited in its application. It only:

• works on a single table, identified by its id, with at least a single tbody section
• assigns a background colour
• allows two colours for odd and even rows
• acts on data cells, rather than rows, and then only if they have no class or background colour already defined

Taking it further

In a recent project I found myself needing to apply a striped effect to a medium sized unordered list. Instead of simply modifying the Zebra Tables code for this particular case, I decided to completely recode the script to make it more generic.

Being more general purpose, the function in my splintered striper experiment is necessarily more complex. Where the original script only expected a single parameter (the id of the target table), the new function is called as follows:

striper('[parent element tag]','[parent element class or null]','[child element tag]','[comma separated list of classes]')

This new, fairly self-explanatory function:

• targets any type of parent element (and, if specified, only those with a certain class)
• assigns two or more classes (rather than just two background colours) to the child elements inside the parent
• preserves any existing classes already assigned to the child elements

See it in action

View the demonstration page for three usage examples. For simplicity’s sake, we’re making the calls to the striper function from the body’s onload attribute. In a real deployment situation, we would look at attaching a behaviour to the onload programmatically — just remember that, as we need to pass variables to the striper function, this would involve creating a wrapper function which would then be attached…something like:

function stripe() {
    striper('tbody','splintered','tr','odd,even');
}

window.onload=stripe;

A final thought

Just because the function is called striper does not mean that it’s limited to purely applying a striped look; as it’s more of a general purpose “alternating class assignment” script, you can achieve a whole variety of effects with it.