（伍）JS表格隔行换色_js在浏览器上打印一个 5 行 5 列的表格,隔行变色-CSDN博客

本文链接：https://blog.csdn.net/Cherry_King/article/details/100807087

0.过程分析

		1. 确定事件: 文档加载完成 onload
		2. 事件要触发函数: init()
		3. 函数:操作页面的元素
				要操作表格中每一行
				动态的修改行的背景颜色

1.HTML表格 & 函数

1.1 HTML表格实现

	<body onload="init()">
		<table width="600px" id="tab">
			<tr >
				<td>
					<input type="checkbox" />
				</td>
				<td>分类ID</td>
				<td>分类名称</td>
				<td>分类商品</td>
				<td>分类描述</td>
				<td>操作</td>
			</tr>
			<tr>
				<td>
					<input type="checkbox" />
				</td>
				<td>1</td>
				<td>手机数码</td>
				<td>华为,小米,尼康</td>
				<td>黑马数码产品质量最好</td>
				<td>
					<a href="#">修改</a>|<a href="#">删除</a>
				</td>
			</tr>
			<tr>
				<td>
					<input type="checkbox" />
				</td>
				<td>2</td>
				<td>厨房用品</td>
				<td>锅，碗，瓢，盆</td>
				<td>打折</td>
				<td><a href="#">修改</a>|<a href="#">删除</a></td>
			</tr>
			<!-- 。。。其他表格行 -->
		</table>
	</body>

1.2 函数实现换色

	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--
			1. 确定事件: 文档加载完成 onload
			2. 事件要触发函数: init()
			3. 函数:操作页面的元素
					要操作表格中每一行
					动态的修改行的背景颜色
		-->
		<script >
			function init(){
				//得到表格
				var tab = document.getElementById("tab");
				//得到表格中每一行
				var rows = tab.rows;
				//便利所有的行,然后根据奇数 偶数
				for(var i=1; i < rows.length; i++){
					var row = rows[i];  //得到其中的某一行
					if(i%2==0){
						row.bgColor = "yellow";
					}else{
						row.bgColor = "red"
					}
				}
			}
		</script>
	</head>