详尽分享隔行换色(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

);

相关文章
|
6月前
|
JavaScript 前端开发
JavaScript实现鼠标放上去之后高亮显示且隔行换色
JavaScript实现鼠标放上去之后高亮显示且隔行换色
|
4月前
|
前端开发
css 巧用 ::after 和 ::before 实现竖排分类导航
css 巧用 ::after 和 ::before 实现竖排分类导航
45 1
|
6月前
|
JavaScript 前端开发
JavaScript解决表格隔行换色的问题
JavaScript解决表格隔行换色的问题
33 0
|
6月前
【最简洁】一句CSS3代码实现不规则自定义背景图拼接样式,多用于异形弹窗背景图
【最简洁】一句CSS3代码实现不规则自定义背景图拼接样式,多用于异形弹窗背景图
|
6月前
|
JavaScript
表格换色的实现方法
表格换色的实现方法
|
6月前
|
JavaScript
如何用JS实现表格隔行换色功能
如何用JS实现表格隔行换色功能
28 0
|
前端开发 JavaScript 信息无障碍
隔行换色(添加商品、删除、单纯的隔行换色)
隔行换色(添加商品、删除、单纯的隔行换色)
66 0
|
前端开发 JavaScript
|
测试技术
【系统分析】“隔行如隔山”但“隔行不隔理”
【系统分析】“隔行如隔山”但“隔行不隔理”
106 0