« Quicker Than window.onloadAffiliate Link Loveliness »

Table Striping Made Easy

21 May 2006 | Tutorials | 35 Comments

From the creator of "15 Days of jQuery" (me):

I’ve prepared a step by step demonstration to take someone else’s well written javascript and reduce it down to 5 lines or less. At the same time you’ll see how I make it a little more flexible and useful.

Take a look at “Stripe your tables the OO way” by Matthew Pennell. His code is clean and concise. And it’s an improvement over a past article from A List Apart.

But with the help of jQuery, I think we can do better.

The concept is to create stripes on a table and then have the background of each row change color when your cursor rolls over.

The Goal

As I mentioned, Mathew’s code is quite good. It shows a level of skill that most part-time web geeks might find difficult to attain. It’s certainly above the head of someone just starting to roll up their sleeves and learn javascript.

How can jQuery help?

My mission is to show you that jQuery can make this task

So what are you waiting for? Jump into the tutorial and see how easy jQuery makes table striping.

Technorati Tags: , , , , , ,

Share and Enjoy:These icons link to social bookmarking sites where readers can share and discover new web pages.

Subscribe

Email Updates:
Email:
RSS Feed:

RSS information | Email Policy | RSS to Email by Aweber

35 Comments

  1. wesley said on 22 May 2006 at 7:45 am:

    ummm where is the tutorial?

  2. Jack said on 22 May 2006 at 9:12 am:

    Sorry, Wesley… this site went up last night and you came by before I could put up the link.

    Tutorial is here.

  3. Matthew Pennell said on 23 May 2006 at 3:49 am:

    Interesting - I’ve been meaning to have a closer look at jQuery for a while; it certainly seems very intuitively written.

    On the issue of using a class or id to reference the table, I’d be interested to see some performance comparisons (as I assume that the $(.whatever) function uses some kind of getElementsByClassName which is obviously going to be slower than getElementById).

    Good stuff, though. :)

  4. wesley said on 23 May 2006 at 3:54 am:

    Oh I apologise then :) I just read the tutorial, it was excellent, well done.

  5. alex vidal said on 27 May 2006 at 2:49 am:

    Matthew:

    It can always be changed to use an id if you assign, let’s say id=”stripeMe” to the table, then changed two spots in the js from $(”.stripeMe tr”) to $(”#stripeMe tr”), it should work instantly.

  6. Joel Birch said on 27 May 2006 at 5:23 am:

    I guess you could use the jQuery hover() function too:

    $(”.stripeMe tr”).hover(function(){/*mouseover stuff*/},function(){/*mouseout stuff*/});

    Great tutorial. Looking forward to more!

    PS. For some reason the link goes to a menu of folder contents instead of straight to the index.html file.

  7. Jack said on 27 May 2006 at 10:55 am:

    @Joel,
    Thanks for the heads up. It was a change I had made in the .htaccess file to make the homepage work… unintended consequences. It’s amazing what we (I) miss on our own sites.

    @Mathew & Alex
    Good points, both of you. I chose class name over id for flexibility… in case several tables on a page were to be striped. That was really the only reason.

  8. guillermo cruz said on 9 Jun 2006 at 1:17 am:

    very nice tutorial, the code is clean and small, I like it! jQuery looks interesting.

  9. Andrew said on 9 Jun 2006 at 9:41 am:

    Freakin’ SWEET!
    you’ve made a jQuery believer out of me.

    thanks for the nice tutorial!

  10. Crille said on 9 Jun 2006 at 10:34 am:

    I’ve done something similar with prototype:

    function tableruler(){
    if (document.getElementById && document.createTextNode){
    var tableRows = $$(’table.ruler tbody tr’);
    tableRows.each(
    function(row){
    row.onmouseover=function(){this.className=’ruled’;return false}
    row.onmouseout=function(){this.className=”;return false}
    }
    )
    }
    }

  11. Jack said on 9 Jun 2006 at 10:36 am:

    @Andrew - You’re welcome

    @Guillermo - Glad you liked the tutorial.

  12. Jack said on 9 Jun 2006 at 10:40 am:

    @Crille,
    First, thanks for the code. jQuery is just one way to do things and certainly Prototype is popular for a reason.

    I’d like to see a page with this in action. (Suppose I could do it myself, but I’m swamped today)

  13. Chris said on 28 Jun 2006 at 6:09 pm:

    Great tutorial.

    For some reason it is only adding the alt class and mouse events to my first 3 rows. Any ideas? My rows are being generated via PHP & mySQL

    Cheers

  14. Jack said on 28 Jun 2006 at 9:55 pm:

    Chris,
    Please provide a link and I’ll take a look. No promises, but sometimes a second pair of eyes is all it takes.

  15. Chris said on 29 Jun 2006 at 6:09 am:

    Thanks mate,

    I have had to butcher out the login procedure so that you can access the page.

    http://hapuk.coreware.co.uk/activity_test.php

    Thanks for your help

  16. Jack said on 29 Jun 2006 at 10:08 am:

    I looked, and although I don’t have a definitive answer, I can give you some things to try:

    I suspect that something in your html is throwing off jQuery’s DOM functions. Look here and you’ll see that there is a lot of invalid or problematic markup:

    http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fhapuk.coreware.co.uk%2Factivity_test.php

    Next, the DOM inspector I use (Firebug) says there’s something wrong with the doctype at the very beginning of the xhtml. So you might want to look at that too.

    Finally, to troubleshoot, you might remove all js except the table striping and see what happens.

    The fact that it stripes three table rows and stops indicates to me that it’s most likely invalid markup.

    A closer inspection shows at least one unclosed a href tag:

    <td><a href="map.php?city=12">Sheffield</td>
  17. Chris said on 3 Jul 2006 at 8:20 am:

    Hi Jack.

    Thanks for pointing the validator out for me. Very useful. Have fixed all the errors but this hasn’t fixed the problem. Any more ideas?

    Thanks a lot

  18. Jack said on 3 Jul 2006 at 8:33 am:

    The other tip I gave you is to try removing all js but jquery and seeing what happens.

  19. Chris said on 3 Jul 2006 at 11:41 am:

    Yep. Tried that. I tried to use the DOM inspector I have on Firefox but it didn’t seem to say I have any errors. Saying that, I don’t know how to use it.

    Any other ideas?

    Cheers

  20. Joe said on 2 Aug 2006 at 1:46 pm:

    Very nice tutorial but instead of mouseout() and mouseover() can’t you jus use the hover(function,function) to achieve the same effect but with less code

  21. Jack said on 2 Aug 2006 at 1:54 pm:

    Yes, good point. I think that the hover function was added after this tutorial… or perhaps my skill level wasn’t quite up to speed.

  22. Bakyt NIyazov said on 18 Oct 2006 at 11:29 pm:

    Hello thank you for your tutorial(s)!!
    I’ve found some bug i don’t where is the bug in Opera or in code..i think Opera.

    So, when you place some
    in one of your then when you try to select some option it will be reseted because of onmouseover invoking in other below

    sorry for my English

  23. Jack said on 18 Oct 2006 at 11:46 pm:

    Bakyt,
    Sorry, not catching what you’re trying to get across.

  24. Bakyt NIyazov said on 6 Nov 2006 at 6:34 am:

    Hi Jack,
    HTML tags are stripped out…
    once again :)

    when you place some SELECT tag in one of your TD tags you cannot actually make selection in SELECT tag because onmouseover invoked in other TD below.

    OR

    Just place some SELECT tag with OPTION tags to one of the TD (but not last TD) and try to select… you’ll see what i’m trying to tell :)

  25. Jack said on 6 Nov 2006 at 10:15 pm:

    Sorry about tags being stripped out…

    I’ll have to check out that problem and see if there’s a simple solution.

  26. Austin said on 28 Dec 2006 at 4:35 am:

    Worked great, nice “hello world”-ish intro to jquery.

    One comment: IMO “chaining” mouseover and mouseout via the return from addClass makes the code a little sloppy to look at. Hover works well (as others have noted) and is much easier on the eyes.

  27. Jack said on 28 Dec 2006 at 10:48 am:

    Austin,
    Once you get used to it, chaining via jQuery is really really handy.

  28. Alexis Bellido said on 1 Feb 2007 at 1:22 pm:

    Hey, very clear steps.

    And you could make it even shorter using the hover event, as Joel mentioned.

    I’d like to suggest putting a link to the basic HTML and CSS for those who don’t get it that they have to grab it from Matthew’s example.

  29. kumar chetan said on 3 Feb 2007 at 3:13 am:

    This is cheap and dirty way to convert a prototype follower to Jquery. I mean I knew it was as simple as adding and removing classes but not in 5 lines.
    cool

  30. Darryl said on 8 Feb 2007 at 1:30 pm:

    I was smiling all the way through. Jquery is very elegant. Reminds me of Ruby on Rails.

  31. Dave Foy said on 19 Apr 2007 at 8:26 am:

    Sorry to throw a ‘me too’ in here but… me too! Superb tutorial, so well thought out and clearly written. I love the way you continuously recap, just what a beginner like me needs.

    Thanks so much : )

  32. Srini said on 13 Sep 2007 at 4:41 am:

    Great tutorial.. Great start to jQuery. jQuery is super powerful.. Such short code to achieve such a complex task.. Chaining is great as well..

  33. Ash Searle said on 25 Oct 2007 at 6:18 am:

    Updated “one-liner” - using hover, filter and implicit $(document).ready() call:

    $(function() {
    $(”.stripeMe tr”).hover(
    function() { $(this).addClass(”over”); },
    function() { $(this).removeClass(”over”); }
    ).
    filter(’:even’).
    addClass(’alt’);
    });

  34. Scott Thompson said on 18 Mar 2008 at 1:26 pm:

    I have been playing with this and I like it, both methods too actually, I’ve no clue what one is better or it’s moot. One thing I do have an issue with is I have multiple tables on my page.

    One table is coloured based upon the data by my CGI and the second table has the nice stripe alternating and the mouseover or hover work perfectly.

    Problem is, the hover / mouseover is happening on all the tables. While this is not a huge issue, the way I see it, it should only be affecting the table with the class of stripeMe

    Am I missing something? I put a different class name on the table I didn’t want affected but it was.

    Scott

  35. JSP tutorials said on 2 Apr 2008 at 9:37 am:

    Gr8 tutorials for beginners like me !! .

Leave a Reply

You can follow the discussion through the Comments feed. You can also pingback or trackback from your own site.