Comments on: Table Striping Made Easy

By: Shawn Johnson

Shawn Johnson — Fri, 08 Jan 2010 16:31:28 +0000

Very nice tutorial. I wanted to mention that you could use a TBODY tag and selector if you wanted to ensure just the body of the table is stripped in cases where you might have a footer (TFOOT).

By: Lymans

Lymans — Sat, 10 Oct 2009 07:29:01 +0000

http://www.easybuyying.com/jean-c-77.html

By: keith

keith — Mon, 05 Oct 2009 21:58:42 +0000

What if I have 2 tables on the page, one with its own style.. Your code changes the style of the other table I have?

By: Zamshed Farhan

Zamshed Farhan — Mon, 07 Sep 2009 09:23:12 +0000

Very nice ….
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)

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

By: Jesse

Jesse — Mon, 27 Jul 2009 05:23:24 +0000

Thank you Im giong to use something like this in a project

By: myukaht

myukaht — Tue, 21 Jul 2009 17:32:06 +0000

?????????! ???? ?????? ???????? ?? ???? ???? ?????? ????!

By: pligg.com

pligg.com — Sat, 18 Jul 2009 06:23:20 +0000

Table Striping Made Easy…

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….

By: Mark Redman

Mark Redman — Thu, 09 Jul 2009 14:59:46 +0000

… BTW, I just applied a style to the nested rows to override the nested “Striping”…

By: Mark Redman

Mark Redman — Sun, 05 Jul 2009 20:47:31 +0000

Hi, Excellent Post, thanks for the help! A great solution!

I have implemented this on an asp.net ListView. In the ListView I have addional nested tables for column headers and pagers etc and the “Striping” is cascaded down to the rows in the nested tables, is there a way of preventing this?

Thanks again…

By: Matt

Matt — Wed, 10 Jun 2009 19:47:39 +0000

For some reason, this is not working in IE6 for me. I’m running Parallels on a Intel Mac, if that helps.

By: hacker

hacker — Wed, 18 Mar 2009 16:34:43 +0000

Fantastic and easy!

By: Alexwebmaster

Alexwebmaster — Tue, 03 Mar 2009 09:38:00 +0000

Hello webmaster
I would like to share with you a link to your site
write me here preonrelt@mail.ru

By: Carlos

Carlos — Fri, 30 Jan 2009 16:51:19 +0000

Nice Job! It’s a great tutorial, but in my page de striping apply to rows in thead element :S

Any idea?

By: piyey

piyey — Fri, 09 Jan 2009 07:38:40 +0000

Hi 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:

prueba de class over

prueba de class alt

prueba de class whatever

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

By: Bob

Bob — Tue, 06 Jan 2009 00:11:46 +0000

@Casey - Read the second response from Jack - He posts the link to the tutorial

By: Casey

Casey — Wed, 17 Dec 2008 00:40:26 +0000

@INTURL
hover on elements other than links in browsers like IE6 don’t work… so, you can’t do it just with css.

By: Casey

Casey — Wed, 17 Dec 2008 00:28:09 +0000

um… 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…

By: INTURL

INTURL — Fri, 24 Oct 2008 18:41:17 +0000

I 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.

By: Latha

Latha — Tue, 30 Sep 2008 09:56:47 +0000

Great 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.

By: Blender

Blender — Wed, 24 Sep 2008 06:53:14 +0000

When you print the table the striping is lost.
Is it possible to print with the applied classes?

By: JSP tutorials

JSP tutorials — Wed, 02 Apr 2008 13:37:31 +0000

Gr8 tutorials for beginners like me !! .

By: Scott Thompson

Scott Thompson — Tue, 18 Mar 2008 17:26:01 +0000

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

By: Ash Searle

Ash Searle — Thu, 25 Oct 2007 10:18:49 +0000

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’);
});

By: Srini

Srini — Thu, 13 Sep 2007 08:41:26 +0000

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

By: Dave Foy

Dave Foy — Thu, 19 Apr 2007 12:26:21 +0000

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 : )

By: Darryl

Darryl — Thu, 08 Feb 2007 17:30:09 +0000

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

By: kumar chetan

kumar chetan — Sat, 03 Feb 2007 07:13:15 +0000

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

By: Alexis Bellido

Alexis Bellido — Thu, 01 Feb 2007 17:22:15 +0000

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.

By: Jack

Jack — Thu, 28 Dec 2006 14:48:18 +0000

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

By: Austin

Austin — Thu, 28 Dec 2006 08:35:20 +0000

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.