Table Row Highlight on hover

How to do it?

[fischermx]

I have a table in my website and I want to have that nice pale yellow highlight when I hover the rows, just like the adwords campaigns reports do it.
I'm on the google css file trying to figure it out, but I've found nothing so far.

[Setek]

With :hover support (from the standards-compliant browsers) it's possible in pure CSS:

table tbody tr:hover { background: #aaa; }

But, as usual, if you want IE to play nice, I believe you have to use javascript -

onmouseover

:)

[Robin_reala]

This isn't the nicest code (I was still learning loads when I wrote it) but it does the job:

Javascript:

var rows = document.getElementByTagName('tr');
for (i=0;i<rows.length;i++) {
 rows[i].onmouseover = highlight;
 rows[i].onmouseout = dehighlight;
}
function highlight() { this.className = "highlight"; }
function dehighlight() { this.className = ""; }

CSS:

tr:hover, tr.highlight { background-color: #aaa; }

[fischermx]

Robin:

That seems to work in Opera and Firefox, but doesn't work in IE!
Is that correct?

[Robin_reala]

Well, the Javascript is there for IE :) I suspect my code is being called out of context. Seeing as it's only there for IE we can use it's non-standard method of attaching events. So:

function setupHighlight() {
var rows = document.getElementByTagName('tr');
for (i=0;i<rows.length;i++) {
rows[i].onmouseover = highlight;
rows[i].onmouseout = dehighlight;
}
}
function highlight() { this.className = "highlight"; }
function dehighlight() { this.className = ""; }
body.addEvent("onload", setupHighlight);

That's untested (on a mac and don't have access to IE) but it should work. All I've done is assign my 'setup' code to a function (setupHighlight) and told IE to run it when the body's finished loading.

BTW, I'm sure someone might be able to rewrite this better if you ask in the JS forum. Oh, and obviously you'll still need the CSS code as well.

[fischermx]

I still getting the error on IE : "Object does not support this property or method".

[Robin_reala]

Sorry, as I can't test this here I'm clutching at straws. Try adjusting the last line to read:

body.onload = setupHighlight;

[wickydoodah]

Try this:

<tr onMouseOver="this.bgColor='yellow';" onMouseOut="this.bgColor='white';">

Add the above to every <tr> tag that should highlight when rolling over it with your mouse.