javascript - 高亮表行

Question

表结构如下

<table> 
 <tbody> 
  <tr> 
    <td>Lorem</td> <td>Ipsum</td> <td>Fierent</td> 
  </tr> 
  <tr> 
    <td>Lorem ipsum</td> <td>pro ut tale erant</td> <td>mnesarchum ne</td>
  </tr>
  <tr>
    <td >mnesarchum ne </td> <td >sapientem</td> <td >fierent mnesarchum </td> 
  </tr>
 </tbody>
</table>

现在，我想突出显示鼠标悬停在哪一行？所以，我有两个问题:

1. 如何实现对上述表结构的高亮行影响？
2. 当行上没有鼠标悬停时，如何恢复高亮效果？

我正在使用 jQuery 1.4+，所以请建议我使用 jQuery 代码实现以下目标的方法。

我已经为此创建了 jsfiddle:http://jsfiddle.net/c9h5w/

谢谢。

Answer 1

我会在当前悬停的行中添加一个类名。例如，您可以使用 CSS 为该行中的每个表格单元格设置特定背景颜色的样式。删除样式只需触发 mouseout 事件并删除类名即可。

CSS:

.hovered td {
    background: #ddd;
}

JavaScript:

$('table tr').mouseover(function() {
    $(this).addClass('hovered');
}).mouseout(function() {
    $(this).removeClass('hovered');
});

Live example .