案例五：实现表格隔行换色

最新推荐文章于 2021-03-02 02:22:41 发布

原创最新推荐文章于 2021-03-02 02:22:41 发布 · 1.5k 阅读

5 ·

CC 4.0 BY-SA版权

JS 专栏收录该内容

17 篇文章

订阅专栏

该博客进行了技术分析，介绍使用HTML新标签区分表头和表格行，确定onload事件使页面加载即显示。通过获取表格元素、tbody行数，用for循环遍历，判断奇偶行（对2取余），并分别设置背景颜色，还给出了详细步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

描述：技术分析
   1、使用新的标签将表头中的行和表格中的行区分 <thead></thead>和<tbody></tbody>
   2、确定事件 onload()。页面一加载便要显示
   3、获取元素：获取表格(表格定义id，使用document.getElementById())。最终是为了获取表格中tbody中行长度(一共有多少行)
   4、获取行数：Tbody里的行数(rows.length)
   5、对行数进行遍历：for循环
   6、判断奇数行偶数行：对元素的角标进行判断(对2取余)
   7、设置背景颜色

步骤分析：
   第一步：确定事件：onload并为其绑定一个函数
   第二步：书写函数,获取表格
   第三步：获取tbody里面的行数
   第四步：对tbody里面的行数进行遍历
   第五步：判断奇数行和偶数行(对2取余)
   第六步：分别对奇数行和偶数行设置背景颜色

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>表格隔行换色</title>
	</head>
	<!--
    	作者：offline
    	时间：2019-05-22
    	需求：表格行换色
    	描述：技术分析
    	1、使用新的标签将表头中的行和表格中的行区分 <thead></thead>和<tbody></tbody>
    	2、确定事件 onload()。页面一加载便要显示
    	3、获取元素：获取表格(表格定义id，使用document.getElementById())。最终是为了获取表格中tbody中行长度(一共有多少行)
    	4、获取行数：Tbody里的行数(rows.length)
    	5、对行数进行遍历：for循环
    	6、判断奇数行偶数行：对元素的角标进行判断(对2取余)
    	7、设置背景颜色
    	
    	
    	
    	
    	 步骤分析： 
    	 第一步：确定事件：onload并为其绑定一个函数 
    	 第二步：书写函数,获取表格
    	 第三步：获取tbody里面的行数
    	 第四步：对tbody里面的行数进行遍历
    	 第五步：判断奇数行和偶数行(对2取余)
    	 第六步：分别对奇数行和偶数行设置背景颜色
    -->
	<script>
     // 1、确定事件
     window.onload=function(){
     //2、获取表格
      var tablEl=document.getElementById("tab01");
     //3、获取表格里行数的长度
      var len=tablEl.tBodies[0].rows.length;
     //4、对长度进行遍历
      //alert(len);
    for (var i=0;i<len;i++) {
    	//判断奇偶
    	if (i%2==0) {
    		//为偶数 对偶数行进行颜色设置
    		
    		 tablEl.tBodies[0].rows[i].style.backgroundColor="blue"
    	} else{
    		//为奇数
    		tablEl.tBodies[0].rows[i].style.backgroundColor="darkgray";
    	}
      }
     }
	</script>

	<body>
		<table border="1" width="500" height="50" align="center" id="tab01">
			<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>25</td>
				</tr>
				<tr>
					<td>3</td>
					<td>王五</td>
					<td>27</td>
				</tr>
				<tr>
					<td>4</td>
					<td>赵六</td>
					<td>29</td>
				</tr>
				<tr>
					<td>5</td>
					<td>田七</td>
					<td>30</td>
				</tr>
				<tr>
					<td>6</td>
					<td>汾九</td>
					<td>20</td>
				</tr>
			</tbody>
		</table>
	</body>

</html>