管理资源吧首页>>>教程>>>编程>>>JavaScript教程>>>

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

　　JQuery实现:

复制代码代码如下:

　　<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

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

　　<head>

　　<title>New Web Project</title>

　　$(function(){

　　//可以是:$('#t1 tbody tr:even').css('background','red');

　　$('#t1 > tbody tr:even').css('background','red');

　　$('#t1 > tbody tr:odd').css('background','blue');

　　});

　　</script>

　　</head>

　　<body>

　　<tbody>

　　<tr><td>aaaaaaa</td></tr>

　　<tr><td>bbbbbbb</td></tr>

　　<tr><td>ccccccc</td></tr>

　　<tr><td>ddddddd</td></tr>

　　<tr><td>eeeeeee</td></tr>

　　<tr><td>fffffff</td></tr>

　　<tr><td>ggggggg</td></tr>

　　<tr><td>hhhhhhh</td></tr>

　　</tbody>

　　</table>

　　</body>

　　</html>

　　JS实现：

复制代码代码如下:

　　<span style="color:#333333;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

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

　　<head>

　　<title>New Web Project</title>

　　//页面加载事件

　　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; i<trs.length;i++){

　　if(i%2==0){

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

　　}else{

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

　　}