欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
您的位置:DIVCSS5首页 > CSS特效 >

CSS+jquery(JQ)table表格隔行变色_隔行换色特效

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. /* css注释:默认css背景被白色 */ 
  7. table.stripe tr.alt td { background:#F2F2F2;} 
  8. /* css 注释:默认隔行背景颜色 */ 
  9. table.stripe tr.over td {background:#EEECEB;} 
  10. /* css注释:鼠标经过时候背景颜色 */ 

隔行变色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.divcss5.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.divcss5.com/">CSS教程网</a></td> 
  11.     <td width="465"><a href="http://www.divcss5.com/">www.divcss5.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隔行变色效果图

4、在线演示:   -   TOP

http://www.divcss5.com/yanshi/2013032401/

5、在线下载:   -   TOP

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/css-texiao/texiao444.shtml

我要分享到:

必备CSS教程 Essential CSS Tutorials

必备HTML基础教程 Essential HTML Tutorials

如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。
CSS教程文章修订日期:2013-03-24 16:41 原创:DIVCSS5
本文www.divcss5.com DIVCSS5版权所有。