您的位置：首页 > Web前端 > JQuery

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

2013-02-13 13:24 1011 查看
利用jquery实现

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

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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>New Web Project</title>

<script type="text/javascript" src="jquery-core/jquery-1.8.0.js"></script>

<script type="text/javascript">

$(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>

<table id="t1" width="500px" align="center">

<tbody> www.2cto.com

<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">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>New Web Project</title>

<script type="text/javascript">

//页面加载事件

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";

}

}

}

</script>

</head>

<body>

<table id="t1" width="500px" align="center">

<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>

 
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航