Question

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/

Answer 1

one way would be to wrap the rows you want to be grouped in a <tbody> and bind the listener to that.

see this fiddle