您的位置:CSS主页 > CSS模块 >

表格table隔行变色_隔行换色jquery CSS特效

 

DIV CSS表格table隔行变色_隔行换色jquery CSS特效,通过使用div+css+jQ实现table表格隔行变色,默认情况下table tr td表格每行背景是间隔颜色,鼠标经过对应table行时候背景有变色换色。

隔行变色目录
  1. css隔行换色原理
  2. 特效代码
  3. 演示截图
  4. 在线演示
  5. 打包下载

1、CSS table隔行变色原理:   -   TOP

此变色换色原理是,通过JQ识别table tr td的双数单数,对应单数双数给予赋予不同CSS样式,通过不同背景,即可实现隔行换色变色效果,当鼠标经过时候JQ调用另外设置的tr td背景,实现鼠标经过背景颜色也跟着变化

2、特效代码:   -   TOP

隔行变色CSS代码:

  1. body{ margin:0 auto; text-align:center} 
  2. table{margin:0 auto; width:410px} 
  3. table{ border:1px solid #000} 
  4. table tr th{ height:28px; line-height:28px; background:#999} 
  5. table.stripe tr td{ height:28px; line-height:28px;
     text-align:center;background:#FFF;vertical-align:middle;} 
  6. table.stripe tr.alt td { background:#F2F2F2;}    
  7. table.stripe tr.over td {background:#EEECEB;} 

隔行变色JQ新建代码:

  1. $(document).ready(function(){ //这个就是传说的ready    
  2.     $(".stripe tr").mouseover(function(){    
  3.        //如果鼠标移到class为stripe的表格的tr上时,执行函数    
  4.       $(this).addClass("over");}).mouseout(function(){    
  5.             //给这行添加class值为over,并且当鼠标一出该行时执行函数    
  6.             $(this).removeClass("over");}) //移除该行的class    
  7.   $(".stripe tr:even").addClass("alt");    
  8.     //给class为stripe的表格的偶数行添加class值为alt 
  9.     //www.thinkcss.com 整理特效 
  10.   });   

隔行换色HTML代码:

  1. <table width="400" border="0" class="stripe" cellpadding="0" cellspacing="1"> 
  2.   <tr> 
  3.     <th width="92">编号</th> 
  4.     <th width="339">网站名称</th> 
  5.     <th width="465">网址</th> 
  6.   </tr> 
  7.    
  8.   <tr> 
  9.     <td width="92">1</td> 
  10.     <td width="339"><a href="http://www.thinkcss.com/">ThinkCSS</a></td> 
  11.     <td width="465"><a href="http://www.thinkcss.com/">www.thinkcss.com</a></td> 
  12.   </tr> 
  13.   <tr> 
  14.     <td width="92">2</td> 
  15.     <td width="339"><a href="http://www.divcss5.com/">DIVCSS5</a></td> 
  16.     <td width="465"><a href="http://www.divcss5.com/">www.divcss5.com</a></td> 
  17.   </tr> 
  18.   <tr> 
  19.     <td width="92">3</td> 
  20.     <td width="339"><a href="http://www.css5.com.cn/">CSS5</a></td> 
  21.     <td width="465"><a href="http://www.css5.com.cn/">www.css5.com.cn</a></td> 
  22.   </tr>   
  23. </table> 

3、特效演示截图:   -   TOP

table隔行变色隔行换色背景换色特效演示效果图
表格table隔行变色效果图

4、在线演示:   -   TOP

http://www.thinkcss.com/yanshi/20120725/

5、在线下载:   -   TOP

到百度网盘下载:百度网盘下载

标签(Tag): 特效 table 换色 变色 隔行 jquery

更多

 

HTML必备基础教程

 

CSS必备基础教程

 

 

如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解。
CSS教程文章修订日期:2012-07-25     点击:
原创来源:ThinkCSS     来源网址:http://www.thinkcss.com/view/m51.html
本文WWW.ThinkCSS.COM(DIV CSS) ThinkCSS版权所有,欢迎转载,并注明出处来源及URL!

 

推荐信息