<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<title>隔行换色-JS</title>
<style type="text/css">
*{ margin:0; padding:0;}
body{ 1000px; height:auto; margin:0 auto; background:#ccc; font-size:16px; font-family: Arial,Microsoft YaHei,SimHei; }
.box{height:auto; overflow:hidden; margin-top:20%;}
.box table{100%; height:auto; overflow:inherit; border:solid #fff; border-1px 1px 1px 0px;}
.box table td{border:solid #fff; border-1px 0px 0px 1px;}
.box table th{border:solid #fff; border-0px 0px 0px 1px;}
.box table tr td{ text-align:center; line-height:30px; }
</style>
</head>
<body onload="SetTableColor()">
<div class="box" >
<table id="tblMain" cellpadding="0" cellspacing="0">
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>民族</th>
<th>学籍</th>
<th>职位</th>
<th>学历</th>
<tr>
<td>张飞</td>
<td>男</td>
<td>45</td>
<td>汉族</td>
<td>初级</td>
<td>打手</td>
<td>小学</td>
</tr>
<tr>
<td>夏侯渊</td>
<td>男</td>
<td>35</td>
<td>藏族</td>
<td>中级</td>
<td>将领</td>
<td>高中</td>
</tr>
<tr>
<td>关羽</td>
<td>女</td>
<td>43</td>
<td>汉族</td>
<td>初级</td>
<td>前锋</td>
<td>三本</td>
</tr>
<tr>
<td>诸葛</td>
<td>男</td>
<td>65</td>
<td>彝族</td>
<td>高级</td>
<td>大师</td>
<td>一本</td>
</tr>
<tr>
<td>詹姆斯</td>
<td>男</td>
<td>35</td>
<td>彝族</td>
<td>大前锋</td>
<td>大师</td>
<td>三本</td>
</tr>
<tr>
<td>JR.史密斯</td>
<td>男</td>
<td>23</td>
<td>彝族</td>
<td>高级</td>
<td>大师</td>
<td>一本</td>
</tr>
<tr>
<td>张飞</td>
<td>男</td>
<td>45</td>
<td>汉族</td>
<td>初级</td>
<td>打手</td>
<td>小学</td>
</tr>
<tr>
<td>夏侯渊</td>
<td>男</td>
<td>35</td>
<td>藏族</td>
<td>中级</td>
<td>将领</td>
<td>高中</td>
</tr>
<tr>
<td>关羽</td>
<td>女</td>
<td>43</td>
<td>汉族</td>
<td>初级</td>
<td>前锋</td>
<td>三本</td>
</tr>
<tr>
<td>诸葛</td>
<td>男</td>
<td>65</td>
<td>彝族</td>
<td>高级</td>
<td>大师</td>
<td>一本</td>
</tr>
<tr>
<td>詹姆斯</td>
<td>男</td>
<td>35</td>
<td>彝族</td>
<td>大前锋</td>
<td>大师</td>
<td>三本</td>
</tr>
<tr>
<td>JR.史密斯</td>
<td>男</td>
<td>23</td>
<td>彝族</td>
<td>高级</td>
<td>大师</td>
<td>一本</td>
</tr>
</table>
</div>
<script type="text/javascript">
function SetTableColor(){
var tbl = document.getElementById("tblMain");
var trs = tbl.getElementsByTagName("tr");
for(var i = 0; i < trs.length; i++){
var j = i + 1;
if (j % 2 == 0){ //偶数行
trs[i].style.background = "#D9EDE1";
}else{
trs[i].style.background = "#ADD9C2";
}
}
}
</script>
</body>
</html>