I am facing an issue with a table I have created:
<table>
<tr class="initial" onmouseover="this.className='highlight'" onmouseout="this.className='initial'">
<td rowspan="2">ELEMENT 1</td>
<td class="value">val 1</td>
</tr>
<tr class="initial" onmouseover="this.className='highlight'" onmouseout="this.className='initial'">
<td>val2</td>
</tr>
<tr class="initial" onmouseover="this.className='highlight'" onmouseout="this.className='initial'">
<td rowspan="2">ELEMENT 2</td>
<td>val a</td>
</tr>
<tr class="initial" onmouseover="this.className='highlight'" onmouseout="this.className='initial'">
<td>val b</td>
</tr>
</table>
When the mouse hovers over a table row, it should color multiple cells, not just one. However, as of now, if the mouse is over ELEMENT 2 cell, only "Element 2" and "Value a" cells are colored, while "Value b" remains unaffected. How can I group these elements together so that when hovering over Element 1, Value 1 or Value 2 cell, all three cells get colored? Any suggestions? A live example demonstrating this issue can be found here: http://jsfiddle.net/PA4y6/