Need help with Javascript mouseover tr highlight

[zigma]

Need help with Javascript mouseover here.

I just wondering if there is a cleaner way to write the following row highlight mouseover event

javascript code:

function highlight_on (thisobj,color)
{
thisobj.style.backgroundColor=color;
}

function highlight_off (thisobj,color)
{
thisobj.style.backgroundColor=color;
}


html file:

<table>
<tr onmouseover="highlight_on(this,'#EEF1FB')" onmouseout="highlight_off(this,'')">
<td>row 1</td>
</tr>
<tr onmouseover="highlight_on(this,'#EEF1FB')" onmouseout="highlight_off(this,'')">
<td>row 2</td>
</tr>
</table>


I really don't like to include all of those mouse event at each row. And if I decided to change the color of my whole site (Not just a page), there will be a lot of editing need to be done.

So I just wondering if anyone know if there a way to write it so I don't have to include all of those mouse event and specify it outside the tr tag in one global place/function?


Here is what I come up with but still doesn't work perfectly, need help with Javascript guru here.

Include at javascript file above:

window.onload = function()
{
// this is main fucntion to call on page load
init_table_list ('listing');
}


function init_table_list (tableid)
{
var tbid = document.getElementById(tableid);

tbid.onmouseover = function() {
highlight_on(this,'#EEF1FB')
}

tbid.onmouseout = function() {
highlight_off(this,'')
}
}


html file:

<table id="listing"> <!-- table id will be pass to init_table_list on load -->
<tr>
<td>row 1</td>
</tr>
<tr>
<td>row 2</td>
</tr>
</table>


The problem with this is the whole table get highlighted. I'm having trouble to get to it's tr tag to trigger mouseover.
It would work if I put the id=listing inside tr tag but that means I have to generate a unique id for all tr, which is not a good idea.

I also tried css hover. but it seems that css hover only work with <a href=> tag. So basiclly I tried to get the same result as I specify a:hover in one css file and include it at all page to have that mouseevent on every page. And I want to do the same thing with this row highlight thing.

This could be a simple problem for javascript guru, but I have to admit that I haven't write javascript that much to know how to fix this problem.

Any help is appreciated.

Thanks

[gil davis]

You've started to use the DOM, you just didn't go down far enough. There is a way to get all the objects by tag name into an array:
function init_table_list (tableid) {
var tb = document.getElementById(tableid);
var tbid = tb.getElementsByTagName("tr");
for (var i in tbid) {
tbid[i].onmouseover = function() {highlight_on(this,'#EEF1FB')}
tbid[i].onmouseout = function() {highlight_off(this,'')}
}
}

However, the "this" operator might not work in the function.

[zigma]

Wow thanks a lot Gil.
You lighted me up on how to reach the tr tag and go through the array of tr

It works for IE but for some reason it doesn't work on netscape 6.0. May be it can't getElementsByTagName on Netscape?

Got to look more into this.

[gil davis]

but for some reason it doesn't work on netscape 6.0. May be it can't getElementsByTagName on Netscape?NS 6 supports getElementsByTagName. It must be something else it doesn't like. Can you hard-code the mouseover and make it work in NS6?

[zigma]

Try go to:
http://www.zigma.host.sk/test.html

The first table is hard coded,
and second one using onload event.

The second table doesn't seems work with netscape.

But based on this link:
http://archive.devx.com/dhtml/articles/sl011701/sl011701-2.asp

getElementsByTagName should work on netscape 6.

Do you see anything wrong at:
http://www.zigma.host.sk/test.html

[zigma]

A HA!
just as I perdict

It's the for loop statement!
This code should fix it


function init_table_list (tableid) {
var tb = document.getElementById(tableid);
var tbid = tb.getElementsByTagName("tr");
//for (var i in tbid) {
for (var i = 0; i < tbid.length; i++) {
tbid[i].onmouseover = function() {highlight_on(this,'#EEF1FB')}
tbid[i].onmouseout = function() {highlight_off(this,'')}
}
}


You should check out the source code at:
http://www.zigma.host.sk/test.html
for an overall trick that I learned from you today. :D

I think this may also improve download time if you have a long table. I wonder if this would save resource usage comparing to rendering hardcode by browser.

Thanks a lot for the help Gil. This code will help me clean out a lot of mouseevent at my website.

Zigma

[viceordf]

<TR onMouseOver="this.bgColor='#FF0000';" onMouseOut="this.bgColor='#FFFFFF';">



you can try this one I think it´s good

You can see it on my site

Http://www.eketsgoif.com/alaget


;)