突出显示表格行 [英] highlight table row

问题描述

我有以下表格结构

 < table> 
< tbody> 
< tr> 
< td> Lorem< / td> < TD>存有< / TD> < TD> Fierent< / TD> 
< / tr> 
< tr> 
< td> Lorem ipsum< / td> < td>产品介绍< / 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/





谢谢。

解决方案

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





CSS：



  .hovered td {
背景：#ddd; 
 
  

JavaScript：

  $（'table tr'）。mouseover（function（）{
 $（this）.addClass（'hovered'）; 
）}。mouseout（function（）{
 $（this）.removeClass（'hovered'）; 
}）; 
  

现场示例 。




I have following table structure

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

Now, I want to highlight the row, on which mouse is hovering? So, I have 2 questions:

1. How can I achieve highlight row affect on above mentioned table structure?
2. How can I revert back the highlight effect, when row don't have move hovering over it?

I am using jQuery 1.4+, so please suggest me way to achieve the following using jQuery code.

I have create jsfiddle for the same: http://jsfiddle.net/c9h5w/

Thanks.

解决方案

I'd add a classname to the row that is currently being hovered. You can then use CSS to style every table cell within this row with a certain background color, for example. Removing the styling is simply a matter of triggering a mouseout event and removing the classname.

CSS:

.hovered td {
    background: #ddd;
}

JavaScript:

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

Live example.

这篇关于突出显示表格行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！