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

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

看到这个小提琴