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

);

相关文章
|
2月前
|
JavaScript 前端开发
JavaScript实现鼠标放上去之后高亮显示且隔行换色
JavaScript实现鼠标放上去之后高亮显示且隔行换色
|
2月前
|
JavaScript 前端开发
JavaScript解决表格隔行换色的问题
JavaScript解决表格隔行换色的问题
21 0
|
2月前
|
JavaScript
表格换色的实现方法
表格换色的实现方法
|
2月前
|
JavaScript
如何用JS实现表格隔行换色功能
如何用JS实现表格隔行换色功能
11 0
|
8月前
|
前端开发 JavaScript 信息无障碍
隔行换色(添加商品、删除、单纯的隔行换色)
隔行换色(添加商品、删除、单纯的隔行换色)
40 0
|
12月前
|
测试技术
【系统分析】“隔行如隔山”但“隔行不隔理”
【系统分析】“隔行如隔山”但“隔行不隔理”
88 0
|
前端开发 JavaScript
div在网页中四周留个等宽“包边”的办法
div在网页中四周留个等宽“包边”的办法
60 0
div在网页中四周留个等宽“包边”的办法
|
前端开发 JavaScript
div在网页四周留个等宽“包边”的办法
div在网页四周留个等宽“包边”的办法
79 0
div在网页四周留个等宽“包边”的办法
|
前端开发
CSS 奇技淫巧 | 巧妙实现文字二次加粗再加边框
CSS 奇技淫巧 | 巧妙实现文字二次加粗再加边框
313 0
CSS 奇技淫巧 | 巧妙实现文字二次加粗再加边框