Tutorial is here.

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.

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.

$(”.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.

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

thanks for the nice tutorial!

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

@Guillermo - Glad you liked the tutorial.

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

Cheers

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

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

Any other ideas?

Cheers

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

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

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

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.

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.

Thanks so much : )

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

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