表格table隔行变色_隔行换色jquery CSS特效
DIV CSS表格table隔行变色_隔行换色jquery CSS特效,通过使用div+css+jQ实现table表格隔行变色,默认情况下table tr td表格每行背景是间隔颜色,鼠标经过对应table行时候背景有变色换色。
1、CSS table隔行变色原理: - TOP
此变色换色原理是,通过JQ识别table tr td的双数单数,对应单数双数给予赋予不同CSS样式,通过不同背景,即可实现隔行换色变色效果,当鼠标经过时候JQ调用另外设置的tr td背景,实现鼠标经过背景颜色也跟着变化
2、特效代码: - TOP
隔行变色CSS代码:
- body{ margin:0 auto; text-align:center}
- table{margin:0 auto; width:410px}
- table{ border:1px solid #000}
- table tr th{ height:28px; line-height:28px; background:#999}
- table.stripe tr td{ height:28px; line-height:28px;
text-align:center;background:#FFF;vertical-align:middle;}- table.stripe tr.alt td { background:#F2F2F2;}
- table.stripe tr.over td {background:#EEECEB;}
隔行变色JQ新建代码:
- $(document).ready(function(){ //这个就是传说的ready
- $(".stripe tr").mouseover(function(){
- //如果鼠标移到class为stripe的表格的tr上时,执行函数
- $(this).addClass("over");}).mouseout(function(){
- //给这行添加class值为over,并且当鼠标一出该行时执行函数
- $(this).removeClass("over");}) //移除该行的class
- $(".stripe tr:even").addClass("alt");
- //给class为stripe的表格的偶数行添加class值为alt
- //www.thinkcss.com 整理特效
- });
隔行换色HTML代码:
- <table width="400" border="0" class="stripe" cellpadding="0" cellspacing="1">
- <tr>
- <th width="92">编号</th>
- <th width="339">网站名称</th>
- <th width="465">网址</th>
- </tr>
- <tr>
- <td width="92">1</td>
- <td width="339"><a href="http://www.thinkcss.com/">ThinkCSS</a></td>
- <td width="465"><a href="http://www.thinkcss.com/">www.thinkcss.com</a></td>
- </tr>
- <tr>
- <td width="92">2</td>
- <td width="339"><a href="http://www.divcss5.com/">DIVCSS5</a></td>
- <td width="465"><a href="http://www.divcss5.com/">www.divcss5.com</a></td>
- </tr>
- <tr>
- <td width="92">3</td>
- <td width="339"><a href="http://www.css5.com.cn/">CSS5</a></td>
- <td width="465"><a href="http://www.css5.com.cn/">www.css5.com.cn</a></td>
- </tr>
- </table>
3、特效演示截图: - TOP
表格table隔行变色效果图
4、在线演示: - TOP
http://www.thinkcss.com/yanshi/20120725/
5、在线下载: - TOP
到百度网盘下载:百度网盘下载
标签(Tag): 特效 table 换色 变色 隔行 jquery
HTML必备基础教程
- • html换行br标签
- • html段落p标签
- • html table tr td th表格标签
- • html内容body标签
- • html图片img标签
- • html form表单标签
- • html input表单标签
- • html列表菜单跳转select标签
- • html div
- • html span
- • html em强调标签
- • html u下划线
- • html斜体i标签
- • html加粗b标签
- • html strong加粗标签
- • html删除线s标签
- • base链接打开方式标签
- • html iframe内嵌
- • html ul li无序列表
- • html ol li有序列表
- • html font文本标签
- • html hr水平线
CSS必备基础教程
- • css颜色 css color)
- • css宽度 css width
- • css高度 css height
- • css行高 css line-height
- • css 字间距 css letter-spacing)
- • CSS border(CSS边框
- • CSS font-family CSS字体
- • CSS 斜体 CSS font-style
- • CSS加粗 CSS font-weight
- • CSS 下划线 CSS text-decoration
- • CSS字母大小写 CSS text-transform
如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解。
CSS教程文章修订日期:2012-07-25 点击:
次
原创来源:ThinkCSS 来源网址:http://www.thinkcss.com/view/m51.html
本文WWW.ThinkCSS.COM(DIV CSS) ThinkCSS版权所有,欢迎转载,并注明出处来源及URL!。