详尽分享隔行换色(1)

简介: 详尽分享隔行换色(1)

隔行变色

*{margin:0; padding:0;}

a{text-decoration:none; cursor:pointer; color: #222;}

table{ width:100%; line-height:30px; border:yellow solid; border-width:1px 0px 0px 1px; text-align:center;}

table td{ border:yellow solid; border-width:0px 1px 1px 0px;}

table th{ border:yellow solid; border-width:0px 1px 1px 0px; font-weight:900; color:blue;}

.one{ background:#C00; background:#D9EDE1;//代码效果参考:http://www.zidongmutanji.com/zsjx/586845.html

}

.two{ background:#09F; background:#ADD9C2; }

.three{ //代码效果参考:http://www.zidongmutanji.com/zsjx/552359.html

background:#039; background:#ccc;}

.four{ background:#FFF; }

$(document).ready(function(){

$("tr").mouseover(function(){

$(this).addClass("four");

})

$("tr").mouseout(function(){

$(this).removeClass("four");

})

$("tr:first").addClass("three");

$("tr:last").addClass("three");

$("tr:even").addClass("one");

$("tr:odd").addClass("two");

}//代码效果参考:http://www.zidongmutanji.com/bxxx/105822.html

);

相关文章
|
8月前
|
C语言
c语言编程练习题:7-3 输出带框文字
本题要求编写程序,输出指定的带框文字。
146 0
|
8月前
蓝桥杯真题代码记录(纸张尺寸
蓝桥杯真题代码记录(纸张尺寸
44 0
|
8月前
|
JavaScript
表格换色的实现方法
表格换色的实现方法
|
前端开发 JavaScript 信息无障碍
隔行换色(添加商品、删除、单纯的隔行换色)
隔行换色(添加商品、删除、单纯的隔行换色)
74 0
|
测试技术
【系统分析】“隔行如隔山”但“隔行不隔理”
【系统分析】“隔行如隔山”但“隔行不隔理”
117 0
|
前端开发 JavaScript
前端实践小项目——表格隔行换色与秒表(含有源代码)
准备表格:表头(thead)和表体(tbody) 绑定事件:加载事件 onload() 获取元素:获取表格 document.getElementById() 获取行的长度:表体中tr的数量len 遍历:for 判断:判断奇偶行 设置背景颜色:css
176 0
前端实践小项目——表格隔行换色与秒表(含有源代码)
|
前端开发
有意思!不规则边框的生成方案
有意思!不规则边框的生成方案
207 0
有意思!不规则边框的生成方案
R 可视乎 | 绘制卡通圣诞树
先和大家说一句圣诞快乐呀,最近 DIY 涂鸦圣诞树非常受欢迎,小编琢磨着能否用 R 语言来绘制一颗圣诞树呢,最后终于让小编找到了教程[1],这不赶紧在今天分享出来给大家,一起动手试一试吧~
295 0
文字到底能玩出多少花样(三)使用background实现花式下划线
文字到底能玩出多少花样(三)使用background实现花式下划线
396 0
文字到底能玩出多少花样(三)使用background实现花式下划线
Excel创意圆环图,让你的表格颜值翻倍!
Excel创意圆环图,让你的表格颜值翻倍!
Excel创意圆环图,让你的表格颜值翻倍!