zoukankan      html  css  js  c++  java
  • 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>
    

      

    竹杖芒鞋轻胜马,一蓑烟雨任平生。 回首向来萧瑟处,也无风雨也无晴。
  • 相关阅读:
    VMware12中CentOS7网络设置
    技术牛人
    PHP程序员如何突破成长瓶颈(php开发三到四年)
    php多线程
    go git 安装配置与使用 (windows 7 64bit)
    php内核和瓦力上线部署
    VM虚拟机下安装Centos7.0图文教程
    php结合redis实现高并发下的抢购、秒杀功能
    php foreach循环中unset后续的键值问题
    excle导入
  • 原文地址:https://www.cnblogs.com/yaobiluo/p/13200206.html
Copyright © 2011-2022 走看看