I have this table:
<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>
Each couple of tr
should be colored when mouse is over. This is not possible (e.g. if mouse is over ELEMENT 2 cell, then "Element 2" and "Value a" cells are colored, while "Value b" is not.). How can I group element together? What I want is: if I'm with mouse upon Element 1, Value 1 or Value 2 cell both (three) cells need to be colored. What can I do? Here is an example of my problem: http://jsfiddle.net/PA4y6/
on*="h()"
orelem.on* = h(){};
You could put the event listener on thetr
elements, and in your function check thee
which is the first argument and use it'se.target
ore.srcElement
to learn about the event itself, which is using a parent (tr
?table
?)j element to delegate it's event to another, lower element. jQuery is all over delegates, for instance.