thumbnail image for this experiment

splintered striper


This experiment was originally posted on Drew McLellan's web development advent calendar 24 ways as splintered striper. Following some feedback, it has been further refined. It was also posted to the Webkrauts Adventskalender: splintered striper - Streifen machen schlank.

That slimming look

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 something like:

window.onload = function() { striper('tbody','splintered','tr','odd,even'); }

Thanks to another Patrick for this refinement from my original code, which suggested creating a wrapper function!

Final thoughts

This script is intended for situations where we want to style a large static document in the browser; if the document is generated dynamically via a server-side language, it would obviously make more sense to assign the alternating classes at that point instead of doing it client side.

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.

And what about accessibility? Even though we're using javascript, we're only influencing the presentation and not the functionality or structure of the document. As long as the parent and child elements are already sufficiently styled, it doesn't make a difference in terms of accessibility (particularly for sighted users without javascript) whether or not the script is executed.

In (the not too distant) future we'll hopefully be able to avoid this whole palaver: when browsers consistently implement the CSS 3 specification, we'll be able to solve this problem in a far more elegant way with the nth-child pseudo-selector. But until then, we can certainly use a little DOM scripting to help browsers along the way.


view this experiment