Highlight Row

[elitecodex]

Hey everyone... I have a table like this


<table style="background-color: #eeeeff;">
<tr style="background-color: #00ff00;">
<td >C1</td>
<td style="background-color: #00ffff;">C2</td>
<td >C3</td>
</tr>
</table>


My problem is that Im trying to highlight the row dynamically using Javascript... in the tr tag... by doing something like this

<tr style="..." onmouseover="this.style='background-color: #ffffff;' " onmouseout="this.style='background-color: #00ff00;' ">

Its not working in either firefox or IE. Im creating a grid dynamically so any of the cells could have additional style tags. I want to keep all the code in the table (ie: no css class names or external javascript functions) if possible.

any ideas? thanks.

[PeejAvery]

You need to use bgColor.

<tr onmouseover="this.bgColor='#ffffff'" onmouseout="this.bgColor='#00ff00'">

[elitecodex]

hmmm... didnt work... here is the generated HTML


...
<table style="border: thin solid #000000;" cellpadding="0" cellspacing="0">
<tr style="background-color: #eeeeff;" onmouseover="this.bgColor='#ddddff'" onmouseout="this.bgColor=''" >
<td style="font-weight: bold;border: thin solid #00ff00;padding: 5px;background-color: #888899;">R2</td>
<td style="font-weight: bold;border: thin solid #00ff00;padding: 5px;">2_0</td>
<td style="font-weight: bold;border: thin solid #00ff00;padding: 5px;">2_1</td>
<td style="font-weight: bold;border: thin solid #00ff00;padding: 5px;">2_2</td>
<td style="font-weight: bold;border: thin solid #00ff00;padding: 5px;">2_3</td>
<td style="font-weight: bold;border: thin solid #00ff00;padding: 5px;">2_4</td>
<td style="font-weight: bold;border: thin solid #00ff00;padding: 5px;">2_5</td>
</tr>
</table>
...


see anything wrong? looks good to me :S

[elitecodex]

Found it... its

this.style.backgroundColor='#00ff00'

That seemed to have worked. Thanks