使用javascript实现表格隔行换色
技术分析
- 首先的确定事件(onload())
- 还有就是新标签的学习
新标签
新标签的作用:就是把表头和表结构隔开 - 还要获取表格的行数,表头不算,因为只有知道行数,才能使用循环来设置表格的颜色
代码步骤
- 首先要确定事件,为页面加载事件
- 然后匿名书写页面事件
首先通过id获取表格元素,在通过表格元素,在获取tbody数组，获取到的是一个数组。
通过数据可以获得tbody中的行数
使用循环来设置表格的颜色
表格隔行换色代码是实现
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>
</title>
<script >
//匿名页面加载事件
window.onload =function(){
//1.先是获取表格
var table1 = document.getElementById("table1");
//2.在获取中的tbody(表格中的tbody可能有很多个),rows是获取tbody里面的行数
//table1.tBodies[0].rows返回的是一个数组。
var len = table1.tBodies[0].rows.length;
for(var i=0;i<len;i++){
if(i%2==0){
table1.tBodies[0].rows[i].style.background="pisnk";
}else{
table1.tBodies[0].rows[i].style.background="yellow";
}
}
}
</script>
</head>
<body>
<table border="1px" id="table1" width="300px" height="150px" align="center">
<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>23</td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
<td>24</td>
</tr>
<tr>
<td>4</td>
<td>赵六</td>
<td>25</td>
</tr>
<tr>
<td>5</td>
<td>田七</td>
<td>26</td>
</tr>
<tr>
<td>6</td>
<td>汾九</td>
<td>27</td>
</tr>
</tbody>
</table>
</body>
</html>
页面效果展示
