Welcome to WebmasterWorld Guest from 54.196.214.35

Forum Moderators: not2easy

Message Too Old, No Replies

Table Row Highlight on hover

How to do it?

     
10:50 pm on Jun 21, 2006 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Jan 31, 2005
posts:1651
votes: 0


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.
1:33 am on June 22, 2006 (gmt 0)

Preferred Member

10+ Year Member

joined:Feb 28, 2005
posts:646
votes: 0


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
:)
1:04 pm on June 22, 2006 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 26, 2004
posts:1497
votes: 0


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; }
6:08 pm on June 22, 2006 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Jan 31, 2005
posts:1651
votes: 0


Robin:

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

10:04 pm on June 22, 2006 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 26, 2004
posts:1497
votes: 0


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.

10:18 pm on June 22, 2006 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Jan 31, 2005
posts:1651
votes: 0


I still getting the error on IE : "Object does not support this property or method".
10:56 pm on June 22, 2006 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 26, 2004
posts:1497
votes: 0


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

body.onload = setupHighlight;
12:44 pm on June 23, 2006 (gmt 0)

Junior Member

10+ Year Member

joined:Nov 3, 2003
posts:44
votes: 0


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.