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>
    

      

    竹杖芒鞋轻胜马,一蓑烟雨任平生。 回首向来萧瑟处,也无风雨也无晴。
  • 相关阅读:
    struts2 局部类型转换器
    Struts2 命名空间配置
    Struts2 国际化
    Struts2 跟踪用户状态
    Struts2
    Struts2支持的处理结果类型
    SGI STL内存配置器(一):内存泄漏?
    TP 3.2 笔记 (1)
    AOP TP框架有感
    eclipse+git
  • 原文地址:https://www.cnblogs.com/yaobiluo/p/13200206.html
Copyright © 2011-2022 走看看