Table Striping Made Easy
21 May 2006 | Tutorials | 36 Comments
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
- Easier to accomplish
- Faster to load on the page
- More flexible to use
So what are you waiting for? Jump into the tutorial and see how easy jQuery makes table striping.
Technorati Tags: jQuery, tutorial, javascript, DOM, table striping, zebra striping, AJAX
Subscribe
36 Comments
Leave a Reply
You can follow the discussion through the Comments feed. You can also pingback or trackback from your own site.
ummm where is the tutorial?
Sorry, Wesley… this site went up last night and you came by before I could put up the link.
Tutorial is here.
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.
Oh I apologise then
I just read the tutorial, it was excellent, well done.
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.
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.
@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.
very nice tutorial, the code is clean and small, I like it! jQuery looks interesting.
Freakin’ SWEET!
you’ve made a jQuery believer out of me.
thanks for the nice tutorial!
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}
}
)
}
}
@Andrew - You’re welcome
@Guillermo - Glad you liked the tutorial.
@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)
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
Chris,
Please provide a link and I’ll take a look. No promises, but sometimes a second pair of eyes is all it takes.
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
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:
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
The other tip I gave you is to try removing all js but jquery and seeing what happens.
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
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
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.
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
Bakyt,
Sorry, not catching what you’re trying to get across.
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
Sorry about tags being stripped out…
I’ll have to check out that problem and see if there’s a simple solution.
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.
Austin,
Once you get used to it, chaining via jQuery is really really handy.
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.
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
I was smiling all the way through. Jquery is very elegant. Reminds me of Ruby on Rails.
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 : )
Great tutorial.. Great start to jQuery. jQuery is super powerful.. Such short code to achieve such a complex task.. Chaining is great as well..
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’);
});
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
Gr8 tutorials for beginners like me !! .
thank you