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.

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.
[tags]jQuery, tutorial, javascript, DOM, table striping, zebra striping, AJAX[/tags]
46 Responses
wesley
May 22nd, 2006 at 7:45 am
1ummm where is the tutorial?
Jack
May 22nd, 2006 at 9:12 am
2Sorry, Wesley… this site went up last night and you came by before I could put up the link.
Tutorial is here.
Matthew Pennell
May 23rd, 2006 at 3:49 am
3Interesting - 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.
wesley
May 23rd, 2006 at 3:54 am
4Oh I apologise then
I just read the tutorial, it was excellent, well done.
alex vidal
May 27th, 2006 at 2:49 am
5Matthew:
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.
Joel Birch
May 27th, 2006 at 5:23 am
6I 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.
Jack
May 27th, 2006 at 10:55 am
7@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.
guillermo cruz
June 9th, 2006 at 1:17 am
8very nice tutorial, the code is clean and small, I like it! jQuery looks interesting.
Andrew
June 9th, 2006 at 9:41 am
9Freakin’ SWEET!
you’ve made a jQuery believer out of me.
thanks for the nice tutorial!
Crille
June 9th, 2006 at 10:34 am
10I’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}
}
)
}
}
Jack
June 9th, 2006 at 10:36 am
11@Andrew - You’re welcome
@Guillermo - Glad you liked the tutorial.
Jack
June 9th, 2006 at 10:40 am
12@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)
Chris
June 28th, 2006 at 6:09 pm
13Great 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
Jack
June 28th, 2006 at 9:55 pm
14Chris,
Please provide a link and I’ll take a look. No promises, but sometimes a second pair of eyes is all it takes.
Chris
June 29th, 2006 at 6:09 am
15Thanks 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
Jack
June 29th, 2006 at 10:08 am
16I 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:
Chris
July 3rd, 2006 at 8:20 am
17Hi 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
Jack
July 3rd, 2006 at 8:33 am
18The other tip I gave you is to try removing all js but jquery and seeing what happens.
Chris
July 3rd, 2006 at 11:41 am
19Yep. 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
Joe
August 2nd, 2006 at 1:46 pm
20Very 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
Jack
August 2nd, 2006 at 1:54 pm
21Yes, good point. I think that the hover function was added after this tutorial… or perhaps my skill level wasn’t quite up to speed.
Bakyt NIyazov
October 18th, 2006 at 11:29 pm
22Hello 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
Jack
October 18th, 2006 at 11:46 pm
23Bakyt,
Sorry, not catching what you’re trying to get across.
Bakyt NIyazov
November 6th, 2006 at 6:34 am
24Hi 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
Jack
November 6th, 2006 at 10:15 pm
25Sorry about tags being stripped out…
I’ll have to check out that problem and see if there’s a simple solution.
Austin
December 28th, 2006 at 4:35 am
26Worked 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.
Jack
December 28th, 2006 at 10:48 am
27Austin,
Once you get used to it, chaining via jQuery is really really handy.
Alexis Bellido
February 1st, 2007 at 1:22 pm
28Hey, 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.
kumar chetan
February 3rd, 2007 at 3:13 am
29This 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
Darryl
February 8th, 2007 at 1:30 pm
30I was smiling all the way through. Jquery is very elegant. Reminds me of Ruby on Rails.
Dave Foy
April 19th, 2007 at 8:26 am
31Sorry 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 : )
Srini
September 13th, 2007 at 4:41 am
32Great tutorial.. Great start to jQuery. jQuery is super powerful.. Such short code to achieve such a complex task.. Chaining is great as well..
Ash Searle
October 25th, 2007 at 6:18 am
33Updated “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’);
});
Scott Thompson
March 18th, 2008 at 1:26 pm
34I 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
JSP tutorials
April 2nd, 2008 at 9:37 am
35Gr8 tutorials for beginners like me !! .
Blender
September 24th, 2008 at 2:53 am
36When you print the table the striping is lost.
Is it possible to print with the applied classes?
Latha
September 30th, 2008 at 5:56 am
37Great Tutorial..but got a problem for me. The mouse over is not working for “even tr”s. For that I have to add one more function like:
$(’.stripeMe tr:even’).mouseover(function() {
$(this).removeClass(”alt”);
$(this).addClass(”over”);
}).mouseout(function() {
$(this).removeClass(”over”);
$(this).addClass(”alt”);
});
then only the bg color is changing on mouseover for even rows.
INTURL
October 24th, 2008 at 2:41 pm
38I don’t really know why people write javascript for this. It’s what u can do with css.
.tableForm tr:hover { background:#F8F8F8; }
will do the same thing.
Casey
December 16th, 2008 at 8:28 pm
39um… am I missing something? I can’t find the tutorial, either… when I click the “have a look at the tutorial” link, it just loads a page without a tutorial…
Casey
December 16th, 2008 at 8:40 pm
40@INTURL
hover on elements other than links in browsers like IE6 don’t work… so, you can’t do it just with css.
Bob
January 5th, 2009 at 8:11 pm
41@Casey - Read the second response from Jack - He posts the link to the tutorial
piyey
January 9th, 2009 at 3:38 am
42Hi Jack!!!
Great tutorial… thanks for share it with us.
I have a question… i try your example and it works very good… but then I want to make something diferent and use DIV tags, not a TABLE, but its looks like the code doesn’t understand it.
This is the example:
<script type=’text/javascript’>
/* <![CDATA[ */
$(document).ready(function() {
$(".whatever").addClass("alt");
})
/* ]]> */
</script>
<div class=”over”>prueba de class over</div>
<div class=”alt”>prueba de class alt</div>
<div class=”whatever”>prueba de class whatever</div>
The two first DIV tags take the class, by default, buy the 3th DIV doesn’t take the alt class with the js.
Thanks for all.
P.D.: Sorry by my English, I speak spanish
Carlos
January 30th, 2009 at 12:51 pm
43Nice Job! It’s a great tutorial, but in my page de striping apply to rows in thead element :S
Any idea?
Alexwebmaster
March 3rd, 2009 at 5:38 am
44Hello webmaster
I would like to share with you a link to your site
write me here preonrelt@mail.ru
hacker
March 18th, 2009 at 12:34 pm
45Fantastic and easy!
Matt
June 10th, 2009 at 3:47 pm
46For some reason, this is not working in IE6 for me. I’m running Parallels on a Intel Mac, if that helps.
RSS feed for comments on this post · TrackBack URI
Leave a reply
Categories
Archives
Links
15 Days Of jQuery is proudly powered by WordPress - BloggingPro theme by: Design Disease