Stripe Dance - Adding Stripes To Tables and Lists

We can all stripe a table. However, I wanted a set of functions that would stripe a table, unordered list, and definition list unobtrusively by setting the value of a class attribute instead of an id attribute.

The code I created/manipulated simply stripes elements that are given the correct class attribute and value. This means any table (in an .html document) given the class value of stripetables, any unordered list given the class value of stripelists, and any definition list given the class value of stripedefinitions will be striped dynamically.

While this idea is not new, I have not yet found an implementation that uses class values instead of id values. This is all possible by using the handy getElementsByClassName( ) function talked about by Jonathan Snook. The base code I used is a mixture of Better Zebra Tables and Javascript Zebra Lists. I edited the code to remove the usage of the getElementById( ) function.

Here is a working example with all CSS, Javascript, and XHTML in one document. View source to see the supporting CSS and additional JS code (addEvent( ) and getElementsByClassName( )) need for this to work properly.

1.   #1 Comment Posted by Nathan Logan on Oct 12, 09:42 AM
   That’s durn purty.
   
   There is a problem, however. If you can do stuff like this easily on the client side, where do the server-side folks come in? Yeah… I’m out of a job. Thanks a LOT.
   
   Really, though, good stuff. No matter what everyone else says, you’re a quality individual.
2.   #2 Author Comment on Oct 12, 09:47 AM
   Thanks bro, and I’m sure you will always have a place at the table of web geeks regardless of what us client-side geeks conjure up. For sure.
3.   #3 Comment Posted by Nathan Smith on Oct 12, 10:39 AM
   Yeah, server side dudes will always amaze me. I have a short attention span, so I need the immediate visual feedback that fiddling with CSS provides. ;)
4.   #4 Comment Posted by kemie on Mar 6, 08:02 AM

   nice little script, but i’m wondering how to make it use classes for unordered lists, rather than background-color: #xxx;

5.   #5 Comment Posted by kemie on Mar 6, 08:17 AM

   figured out how to do it, probably in the most unelegant way :), but this adds a class of “lm_even” to all even lis:

   var stripelist = function() {

   var even = false; var uls = getElementsByClassName(“stripelists”); if (! uls) { return; }

   for(var x=0;x!=uls.length;x++){
   var ul = uls[x];

   var lis = ul.getElementsByTagName(“li”); for (var h = 0; h < lis.length; h++) { var list = lis[h];
   list.onmouseover=function(){this.className += “lm_over”; return false}
   list.onmouseout=function(){this.className = this.className.replace(“lm_over”, “”); return false}

   if(even)
   list.className += ” lm_even”;

   even = !even;

   }

   }

   }
6.   #6 Author Comment on Mar 6, 09:50 AM

   Kemie – Nice, a little more variety never hurts.

7.   #7 Comment Posted by Steven G on May 13, 11:03 AM

   Very cool script! Been looking for something like this for a while now. Kemie’s addition is particularly useful.

   The only issue so far is that this script doesn’t work in IE (windows or Mac) I reckon since it degrades gracefully this is not such a huge issue, but if anyone here figures out how to get IE to play nice with these stripes, I’m all ears

8.   #8 Author Comment on May 14, 10:44 AM

   @Steven – I believe the script does work in IE 6, 7, and 5.5. I’m looking at in in 6 as I am typing this. Maybe a configuration issue? Is IE throwing an error?

9.   #9 Comment Posted by Steven G on May 18, 12:57 PM

   Fortunately, there are no errors with this script…either the stripes show up or they don’t. IE 5 and 6 doesn’t show them at all (have not tested 7 yet), but it could be a config issue. I tried turning active scripting on in Tools > Security but that had no effect whatsoever.

   If it makes any difference, I am running IE on Virtual PC

10.   #10 Comment Posted by Katie on Jul 26, 10:20 AM

    I’m a little bit stumped. I’m not a programmer, so I wouldn’t really know, but how do I “stripe” the th’s in the tbody tag?

11.   #11 Comment Posted by Chat Clussman on Jul 23, 01:38 PM

    In the stripelist function I changed the mouseover statement to append the “ lm_over” class rather than just setting the class to “lm_over” to keep the script from overwriting other class declarations.

    Revised line:

    list.onmouseover=function(){ this.className += “ lm_over”; return false }

    Note: multiple class declarations are separated by spaces in HTML/XHTML so the space between the opening quote and the lm_over is important.

    The script works great and is much appreciated.