华佗养生网

全部频道

您的当前位置：首页利用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



显示全文