jQuery: Easy Alternate Colored Table Rows & A Suprise Effect
Posted 4 months, 3 weeks ago at 2:00 pm. 11 comments
So here’s something that a lot of people seem to be unsure of. It seems that zebra striping tables is something that eludes a lot of people. So here is a easy way to do it using jQuery.
Striping The Table
First you need a table. It must have the tbody tag around the tables body content or it won’t work. Next we need to make two css classes. One for the odd rows, one for the even rows. Something like this should do the trick:
1 2 3 4 5 6 | .odd { background-color: #dddddd; } .even { background-color: #ffffff; } |
Now add a class to your table such as striped you can use it to style the table but it’s main function is for jQuery to use as a target. Don’t forget to add the jquery script to your page as normal.
If you want the even/odd rows to be the same color as your background you would normally leave the background color out, but in this case we need to put it in as it is used for the special effect later. If you don’t want to use the effect then please feel free to leave it out.
Next on with the jQuery script:
1 2 3 4 | $(document).ready( function() { $("table.striped tbody tr:odd").addClass("odd"); $("table.striped tbody tr:even").addClass("even"); }); |
Yep, that’s it. Thats all you need to stripe a table. However what about the famous highlight trick. Yep the one that highlights the row you have moved your mouse over. Add a class to your css called highlight or something similar and then change your jQuery script to the following:
1 2 3 4 5 6 7 8 9 | $(document).ready( function() { $("table.striped tbody tr").mouseover( function() { $(this).addClass("highlight"); }).mouseout( function() { $(this).removeClass("highlight"); }); $("table.striped tbody tr:odd").addClass("odd"); $("table.striped tbody tr:even").addClass("even"); }); |
This should give you a table that has zebra striped rows and has a nice little mouse over effect. But to show just how much jQuery can actually do here is a little effect I cooked up earlier today. Add the jQuery color plugin which you can get from the jQuery Plugins site to the top of your page, underneath the link to jQuery itself. Then change your code again to this:
1 2 3 4 5 6 7 8 9 10 11 12 13 | $(document).ready( function() { $("table.striped tbody tr").mouseover( function() { $(this).animate({backgroundColor: "orange"}, {queue:false, duration:350 }); }).mouseout( function() { if($(this).attr("class") == "odd") { $(this).animate({backgroundColor: "#CCFFFF"}, { queue:false, duration:350}); } else { $(this).animate({backgroundColor: "#FFFFFF"}, { queue:false, duration:350}); } }); $("table.striped tbody tr:odd").addClass("odd"); $("table.striped tbody tr:even").addClass("even"); }); |
Voila, a nice color fade effect on your mouse over highlight. You must change the first background color to the color you want the highlight to be. The second background color must be the same color as your odd class’ background color and the third must be the same as your even class’ background color. From what I can tell the colors must be hard coded when using this color fade animation or it just doesn’t work. For those itching to see this in action here is an example table for you:
| Name | Console | Format |
|---|---|---|
| Guitar Hero 3 | PS3 | Blu-Ray |
| Gran Turismo 5: Prologue | PS3 | Blu-Ray |
| Gran Turismo 5: Prologue | PS3 | Digital Download |
| Halo 3 | Xbox 360 | DVD-9 |
Don’t forget if you have any problems using the code, something just isn’t working or you don’t understand something then please just ask and I’ll do my best to help you with your problem.
Loading ...
You’ve a small error that prevents this demo from working. $document should be $.document.
Otherwise, great post!
Ignore my last comment. I don’t know what I was thinking. It looks like instead the problem is that the demo tries to use $ when noConflict() has been called. Sorry about that.
Hey Hunter,
Thanks for letting me know about the problem. The strange thing is that it has been working since I put it up, I’m not exactly sure what went wrong. It seems though that it has trouble accessing the version of jQuery already used for the AJAX effects that are already integrated into the blogs theme.
The only way I could solve it was to include the newer version of jQuery, as I can’t find the
noConflict()you are referring to and Firebug couldn’t find it either. If you can explain a little more about what you mean I might be able to fix the problem properly.Again thanks for letting me know about the problem.
Hey thanks for this script!
Just wanted to add: in order to get the simple highlighting to work you need to add the .highlight class BELOW the .odd and .even classes in your CSS file.
Cheers again!
Kai
Thanks Kai. Glad you liked the code & thanks for those words of wisdom.
Very thanks =)
I used ‘n’ work.
No problem.
thanks for the tutorial.
I´m using this now in an little admin panel.
btw. there is a little typing error in the last code snippet. you look for the table class “stripey” which should be “striped”.
Thanks for letting me know. Never noticed, I guess that’s why you are supposed to proof read.
Again thanks for letting me know and glad you found a use for my little snippets.
lol yet another amazing script using a little elbow grease and jquery.
Almost seems that as soon as I discover Jquery you start writing tutorials on it. ^_^
Veneficus Unus if you drop me an email i may share a handly little search I threw together lol. ^_^
Hey there Popcorn,
jQuery is an awesome way to be introduced to javascript since it make some of the concepts a lot easier for people to understand. I am mainly a PHP (server-side) scripter and therefore need javascript to be simple until I can learn it properly. I found jQuery was the best for me.
I would recommend you test out other javascript libraries though such as prototype & mootools as everyone has a different preference as to which library they like.