您好,欢迎来到皓特汽车网。
搜索
您的当前位置:首页利用JQuery和JS实现奇偶行背景颜色自定义效果_javascript技巧

利用JQuery和JS实现奇偶行背景颜色自定义效果_javascript技巧

来源:皓特汽车网


JQuery实现:
代码如下:
"http://www.w3.org/TR/html4/loose.dtd">



New Web Project


$(function(){
//可以是:$('#t1 tbody tr:even').css('background','red');
$('#t1 > tbody tr:even').css('background','red');
$('#t1 > tbody tr:odd').css('background','blue');
});














aaaaaaa
bbbbbbb
ccccccc
ddddddd
eeeeeee
fffffff
ggggggg
hhhhhhh





JS实现:
代码如下:
"http://www.w3.org/TR/html4/loose.dtd">



New Web Project


//页面加载事件
window.onload=function(){
//获取table
var tb1 = document.getElementById("t1");
//获取table中的tbody
var tbody = tb1.getElementsByTagName("tbody")[0];
//获取tr
var trs = tbody.getElementsByTagName("tr");
//根据奇、偶行显示不同的背景颜色
for(var i=0; iif(i%2==0){
trs[i].style.backgroundColor="red";
}else{
trs[i].style.backgroundColor="blue";
}
}
}













aaaaaaa
bbbbbbb
ccccccc
ddddddd
eeeeeee
fffffff
ggggggg
hhhhhhh



Copyright © 2019- howto1234.cn 版权所有

违法及侵权请联系:TEL:199 18 7713 E-MAIL:2724546146@qq.com

本站由北京市万商天勤律师事务所王兴未律师提供法律服务