I have the following table structure:
<table>
<tr>
<td class="classNormal" onmouseover="this.className = 'classSelected'" onmouseout="this.className = 'classNormal'" onMouseMove="this.className = 'classSelected'">NORMAL</td>
<td class="classSelected" onmouseover="this.className = 'classSelected'" onmouseout="this.className = 'classNormal'" onMouseMove="this.className = 'classSelected'">SELECTED</td>
</tr>
<tr>
<td class="classNormal" onmouseover="this.className = 'classSelected'" onmouseout="this.className = 'classNormal'" onMouseMove="this.className = 'classSelected'">XYZ</td>
<td class="classNormal" onmouseover="this.className = 'classSelected'" onmouseout="this.className = 'classNormal'" onMouseMove="this.className = 'classSelected'">2</td>
</tr>
</table>
What I want to do is to highlight on cell on load and then I need to deselect it if user moves mouse over other cells in the table. I know I can do it by using onMouseOver event the question is how can I reffer to that specific cell ??? (the one selected onLoad)
<table>
<tr>
<td class="classNormal" onmouseover="this.className = 'classSelected'" onmouseout="this.className = 'classNormal'" onMouseMove="this.className = 'classSelected'">NORMAL</td>
<td class="classSelected" onmouseover="this.className = 'classSelected'" onmouseout="this.className = 'classNormal'" onMouseMove="this.className = 'classSelected'">SELECTED</td>
</tr>
<tr>
<td class="classNormal" onmouseover="this.className = 'classSelected'" onmouseout="this.className = 'classNormal'" onMouseMove="this.className = 'classSelected'">XYZ</td>
<td class="classNormal" onmouseover="this.className = 'classSelected'" onmouseout="this.className = 'classNormal'" onMouseMove="this.className = 'classSelected'">2</td>
</tr>
</table>
What I want to do is to highlight on cell on load and then I need to deselect it if user moves mouse over other cells in the table. I know I can do it by using onMouseOver event the question is how can I reffer to that specific cell ??? (the one selected onLoad)