js03-表格的隔行换色

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			
			function checkAll(){
				/*				 
				 * 1、获取当前box的状态;2、获得其他所有 box ;3、对box 进行操作
				 * */
				var check1 = document.getElementById("check1")
				var checked = check1.checked
				var checkBoxs = document.getElementsByTagName("input")
				for (var i = 1;i<checkBoxs.length;i++) {
					checkBoxs[i].checked = checked
				}
			}
			function init(){
				var tab =document.getElementById("tab")   //得到表格
				var rows = tab.rows
				for (var i = 1;i <rows.length;i++) {
					if (i%2 == 0) {
						rows[i].bgColor = "red"
					} else{
						rows[i].bgColor = "yellow"
					}
				}
			}
			
		</script>
	</head>
	<body onload="init()">
		<table border="1px" width="600px" id="tab">
			<tr>
				<td>
					<input type = "checkbox" id="check1" onclick="checkAll()"/>
				</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>分类操作</td>
			</tr>
			<tr>
				<td>
					<input type = "checkbox" />
				</td>
				<td>3</td>
				<td>分类名称</td>
				<td>分类商品</td>
				<td>分类描述</td>
				<td>分类操作</td>
			</tr>
			<tr>
				<td>
					<input type = "checkbox" />
				</td>
				<td>4</td>
				<td>分类名称</td>
				<td>分类商品</td>
				<td>分类描述</td>
				<td>分类操作</td>
			</tr>
			<tr>
				<td>
					<input type = "checkbox" />
				</td>
				<td>5</td>
				<td>分类名称</td>
				<td>分类商品</td>
				<td>分类描述</td>
				<td>分类操作</td>
			</tr>
			
			
		</table>
	</body>
</html>

  

js03-表格的隔行换色

上一篇:Linux下Apache服务的查看和启动


下一篇:JS leetcode x 的平方根 题解分析