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

JQuery 实现:

复制代码 代码如下：

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

<头>
>

<脚本类型=“text/javascript”src=“jquery-core/jquery-1.8.0.js”>

$(function(){
//可以是:$('#t1 tbody tr:even').css('background','red');
$('#t1 > tbody tr:even').css('背景','红色');
$('#t1 > tbody tr:odd').css('背景','蓝色');
} ）；




<身体>
<表格 id="t1" width="500px"align="center">
; 
aaaaaaa
bbbbbbbb
cccccccc
dddddddd
eeeeeeee
ffffffff
gggggggg
hhhhhh

JS 实现：

复制代码 代码如下：

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

<头>
>


<脚本类型=“text/javascript”>
//页面加载事件
window.onload=function(){
//获取表
var tb1 = document.getElementById("t1");
//获取表中的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="红色";
}else{
trs[i].style.backgroundColor="blue";
}
}
}



<身体>
<表格 id="t1" width="500px"align="center">
;
aaaaaaa
bbbbbbbb
cccccccc
dddddddd
eeeeeeee
ffffffff
gggggggg
hhhhhh