Welcome to WebmasterWorld Guest from 54.167.216.93

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)

WebmasterWorld Senior Member 10+ Year Member



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 Jun 22, 2006 (gmt 0)

10+ Year Member



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 Jun 22, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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 Jun 22, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Robin:

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

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

WebmasterWorld Senior Member 10+ Year Member



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 Jun 22, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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

WebmasterWorld Senior Member 10+ Year Member



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 Jun 23, 2006 (gmt 0)

10+ Year Member



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.

 

Featured Threads

Hot Threads This Week

Hot Threads This Month