具隔行变色和鼠标滑过背景变色效果，代码比较简单

如果表中的行数太大，则可能会影响用户在行之间的区分，因此容易发生错误，因此有几种常用的措施可以有效地缓解此问题。一个是每行的颜色变化，第二个是可以通过鼠标悬停来实现当前行的背景颜色效果。下面是一个示例代码，您可以从中学习，代码如下：

[HTML] 纯文本查看 复制代码













  

    

      
工号
      
姓名
      
年龄
      
性别
    
    

      
2014010101
      
张峰
      
56
      
男
    
    

      
2014010102
      
李玉
      
42
      
Ů
    
    

      
2014010103
      
王珂
      
36
      
男
    
    

      
2014010104
      
张钰
      
31
      
Ů
    
    

      
2014010105
      
朱顾
      
44
      
男
    
    

      
2014010106
      
胡雨
      
35
      
Ů
    
    

      
2014010107
      
刘希
      
30
      
男
    
    

      
2014010108
      
孙宇
      
45
      
Ů
    
    

      
2014010109
      
谷雨
      
33
      
男
    
    

      
2014010110
      
科宇
      
45
      
Ů
    
  


上面的代码满足了我们的要求，当鼠标移到背景上时，具有交错的变色和背景变色的效果。该代码相对简单。实施过程介绍如下。
一.代码注释：
1. $（document）.ready（function（）{}），当加载文档结构时，然后执行该函数中的代码。
2. $（“＃tab tr：奇数”）.find（“ td”）。addClass（“ tr_odd”），将样式类tr_odd添加到表行集中奇数行下方的单元格中，因为索引是从零开始的，所以要设置偶数行的背景颜色。
3. $（“＃tab tr：even”）。find（“ td”）。addClass（“ tr_even”），设置奇数行的背景颜色。
4. $（“＃tab tr”）。mouseover（function（）{}），为该行注册鼠标悬停事件处理程序。
5. $（this）.find（“ td”）。addClass（“ mouse_color”），将样式类mouse_color添加到当前行的单元格中，即在设置单元格的背景色时鼠标悬停，即设置行的背景颜色。
6. $（“＃tab tr”）。mouseout（function（）{}），为该行注册mouseout事件处理程序。
7. $（this）.find（“ td”）。removeClass（“ mouse_color”），删除当前行的mouse_color样式类，即，当鼠标离开时，恢复单元格的背景色默认。
					

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/bofangqi/article-365609-1.html