jquery实现表格隔行换色效果

本文实例讲述了jquery实现表格隔行换色效果的代码。分享给大家供大家参考。具体如下：
运行效果截图如下：

具体代码如下：

1、新建一个web项目，jQuery；
2、在WebContent目录下新建script文件夹，将jquery-1.10.1.js复制到script中；
3、同样，新建TableColor.html；
TableColor.html：

 
 
 
 
 
 
 
  body 
  { 
   width:100%; 
   height:100%; 
   font-size:12px; 
  } 
  table 
  { 
   width:80%; 
   height:90%; 
  } 
  .tr_odd 
  { 
   background: #EBF2FE; 
  } 
  .tr_even 
  { 
   background: #B4CDE6; 
  } 
  .tab_body 
  { 
   text-align: center; 
  } 
 
 
 
 
  
 
   
 
    
学号
 
    
姓名
 
    
年龄
 
    
性别
 
   
 
   
 
    
2013060101
 
    
张华
 
    
23
 
    
男
 
   
 
   
 
    
2013060102
 
    
赵雪
 
    
24
 
    
女
 
   
 
   
 
    
2013060103
 
    
孙旭
 
    
21
 
    
男
 
   
 
   
 
    
2013060104
 
    
李姝
 
    
20
 
    
女
 
   
 
   
 
    
2013060105
 
    
公孙旭
 
    
22
 
    
男
 
   
 
   
 
    
2013060106
 
    
李枝花
 
    
24
 
    
女
 
   
 
   
 
    
2013060107
 
    
魏征
 
    
22
 
    
男
 
   
 
   
 
    
2013060108
 
    
施礼
 
    
20
 
    
女
 
   
 
   
 
    
2013060109
 
    
王志
 
    
23
 
    
男
 
   
 
   
 
    
2013060104
 
    
方小许
 
    
20
 
    
女
 
   
 
  
 
 
 

以上就是本文的全部内容，希望对大家学习javascript程序设计有所帮助。