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

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 应该被着色。这是不可能的(例如，如果鼠标位于元素 2 单元格上，则“元素 2”和“值 a”单元格会着色，而“值 b”不会。)。如何将元素组合在一起？我想要的是:如果我在元素 1、值 1 或值 2 单元格上使用鼠标，则两个(三个)单元格都需要着色。我能做些什么？这是我的问题的示例:http://jsfiddle.net/PA4y6/

Answer 1

一种方法是将要分组的行包装在 <tbody> 中并将监听器绑定(bind)到它。

看这个fiddle