1.需求分析
2.技术分析
新标签的学习:
表头(编号)--个
单元格效果: 加粗、居中--------< tr>
一个表格里面不只有一个<tbody><tbody>
获取元素: 获取表格(document.getElementById()),最终为了获取表格中 tbody里面的行数(长度)
Tbody.里面的行数 (rows.length)
Js 的遍历 (for 循环)
获取奇数行和偶数行(对遍历中角标对 2取余)
设置背景颜色 (.style.backgroundColor)
3.步骤分析
第一步: 确定事件 (onload) 并为其绑定一个函数
第二步: 书写函数(获取表格)
第三步: 获取 Tbody,里面的行数
第四步:对Tbody,里面的行进行遍历
第五步: 获取奇数行和偶数行(对遍历中角标对 2 取余)
第六步:分别对奇数行和偶数行设置背景颜色
4.代码实现
<html>
<head>
<meta charset="utf-8">
<title>表格隔行换色</title>
<script>
window.onload = function(){
var tbEle = document.getElementById("tbl");
var len = tbEle.tBodies[0].rows.length;
for(var i=0; i<len;i++){
if(i%2==0){
//对偶数行设置背景颜色
tbEle.tBodies[0].rows[i].style.backgroundColor="pink";
}else{
//对奇数行设置背景颜色
tbEle.tBodies[0].rows[i].style.backgroundColor="gold";
}
}
}
</script>
</head>
<body>
<table border="1" width="500" height="50" align="center" id="tbl">
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>张三</td>
<td>22</td>
</tr>
<tr>
<td>2</td>
<td>钱二</td>
<td>20</td>
</tr>
<tr>
<td>3</td>
<td>李四</td>
<td>21</td>
</tr>
<tr>
<td>4</td>
<td>王五</td>
<td>20</td>
</tr>
<tr>
<td>5</td>
<td>赵六</td>
<td>21</td>
</tr>
<tr>
<td>6</td>
<td>田七</td>
<td>22</td>
</tr>
<tr>
<td>7</td>
<td>汾九</td>
<td>22</td>
</tr>
</tbody>
</body>
</html>
