html 奇偶行 变色,利用JQuery和JS实现奇偶行背景颜色自定义效果

JQuery实现:

/p>

"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实现：

/p>

"http://www.w3.org/TR/html4/loose.dtd">

New Web Project

//页面加载事件

window.οnlοad=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; i

if(i%2==0){

trs[i].style.backgroundColor="red";

}else{

trs[i].style.backgroundColor="blue";

}

}

}

aaaaaaa

bbbbbbb

ccccccc

ddddddd

eeeeeee

fffffff

ggggggg

hhhhhhh