View Full Version : Changing Table Colors

LuckY ThirteeN
12-24-2002, 05:40 AM
Hey...I'm putting up a new layout for my site, with tables used extremely excessively. I was wondering, how do you make it so that the background color of rows change on mouseover? If someone could help me out, I'd appreciate it. Thanks.

12-24-2002, 06:01 AM
That is simple javascript... so simple I can do it :) YAY!

<tr onMouseOver="this.style.backgroundColor = '#ff0000'" onMouseOut="this.style.backgroundColor = '#ffffff'">
<td>Testing 1..2..3.. Testing</td>

Or you could pass it to a function...I think ;)

var OriginalColor = '#ffffff'
var RollOverColor = '#ff0000'
function changeIt(TheCell){
if (TheCell.style.backgroundColor = OriginalColor) {
TheCell.style.backgroundColor = RollOverColor
TheCell.style.backgroundColor = OriginalColor

Now you can easily do this..

<tr id="MyTr" onMouseOver="changeIt(this.id)" onMouseOut="changeIt(this.id)">
<td>Testing 1..2..3..Testing</td>

Although I'm not sure about the this.id , if that doesn't work then just use the current tr's id which in this case is MyTr.

So it would look like:

onMouseOver="changeIt(MyTr)" onMouseOut="changeIt(MyTr)"


LuckY ThirteeN
12-24-2002, 06:09 AM
Muah ha ha ha ha ha!!! I feel the power! Just like Energizer!

lol but anyways, thanks a bunch. It works great.

12-24-2002, 06:14 AM
lol. :D
Which one did you use?:confused:

12-24-2002, 10:32 AM
or you could change the class! (my favourite way of doing it)

td.on {
background-color: #999999;
td.off {
background-color: #FFFFFF;

&nbsp;&nbsp;&nbsp;&nbsp;<td onmouseover="this.className='on';" onmouseout="this.className='off';" class="off">


12-24-2002, 11:35 PM
Ahhh! className... Finnaly! I've been trying to do that for ages. I should of asked but for some reason I just forgot about it.

In the end I settled for changing the style in the javascript itself which is not an esaily editable way of doing it.

Thanks for that redhead! :D

LuckY ThirteeN
12-25-2002, 05:31 AM
Sorry it took me a day or two or whatever (no concept of time) to reply, but I've been doing alot of last-minute Christmas shopping. Anyway, in response to your question, M, I used your first example - the one that just used MouseOver and MouseOut. Thanks for it. I'll try the class setting in a minute, red.

12-27-2002, 09:23 AM
Which browsers actually support events on td elements these days?

12-27-2002, 02:28 PM
Which browsers actually support events on td elements these days?

sheesh kabab... loads of them...

ie 4+, mozilla, ns6+ (if not 5+), definatly opera 6.05 (probably some of the earlier opera's too) etc... so pretty much everyone (depending on javascript being enabled ;)) will be able to see it...