Splintered Striper

15 Comments

Comments are ordered by helpfulness, as indicated by you. Help us pick out the gems and discourage asshattery by voting on notable comments.

Got something to add? You can leave a comment below.

  1. Bartts

    For brazilian people, this same article in Brazilian portuguese, with inclusion of “sort table”. http://ruf.rockgrafia.com/?art_id=52

  2. Jonatan Olofsson

    This script could very easily have been modified to allow the input of an Object or Id as well as a tag name in the first parameter, just to make it possible to apply it on a single element instead of all lists, all tables etc.

    otherwise, good article

  3. Edd

    Just wondering—might it be possible for someone to compile all of these articles into a zip file or pdf complete with the graphics, scripts, etc. for us to download and keep on hand for future reference? I have enjoyed them so far and would really like to have them for easy reference.

  4. Matt Wilcox

    It will be nice when CSS3 gets supported widly enough to use

    tr:nth-child(even) { background-color : #eee; }

    instead of the javascript approach. Until that time though, this method is very useful.

  5. Patrick

    You can avoid the extra function definition (which, besides looking clumsy, puts an unnecessary variable in your global namespace) to attach the call to striper() to the onload event, you can use an anonymous function like so:

    window.onload = function() {

    striper('tbody','splintered','tr','odd,even');

    }

    Also, if you have existing onload events, you can check out Simon Willison’s tutorial on how to avoid overwriting them:

  6. john brown

    Out of curiosity how does this scale for a table of 100 rows? 1000 rows? Just curious – I’ve tinkered with the JS solution before and it didn’t scale well – resorted to server-side ASP/PHP…

  7. John

    This is awesome. I’ve been using the zebra code to stripe the tables on my tennis team’s site, and it’s always been a PITA to remember to set the ID and update the onload function with any new tables I add. Not only that, but the zebra forces you to put style information in the call to the function; here, it’s in the stylesheet where it belongs. Thanks for a great timesaver!

  8. patrick h. lauke

    john, if you do have the means to do it server-side i’d always go for that.

    what do you mean exactly with your query on scaling? are you wondering about how long it would take to execute and/or slow the browser down?

  9. Ted Drake

    Thanks Patrick for finally getting this out the door. I guess you could say that I was a beta tester of this script ages ago. It’s great. It provides so much flexibility.

    I’ve used it on a heavy traffic intranet with some pretty huge tables. So far, there has been absolutely no performance issues.

    Enjoy the new candy cane striping joy!

  10. Jack Hardcastle

    If you change line 29 to

    if ((parentElementClass == null)||(currentParent.className.indexOf(parentElementClass))) {

    then you can do something like this

    ul class="videos striped"

    and it will match. This lets you apply more than one class to your parent element.

Impress us

Be friendly / use Textile