Question

我有这张桌子：

<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>

当鼠标结束时，每对tr都应该着色。这是不可能的（例如，如果鼠标在ELEMENT 2细胞上，则“元素2”和“值a”细胞被着色，而“值b”不是。）。如何将元素组合在一起？我想要的是：如果我在元素1，值1或值2单元格上使用鼠标，则需要对两个（三个）单元格进行着色。我能做什么？以下是我的问题示例：http://jsfiddle.net/PA4y6/

Answer 1

一种方法是将要分组的行包装在<tbody>中，并将侦听器绑定到该行。

请参阅此fiddle

将每对行的表分组为唯一元素

1 个答案: