JavaScript表格的隔行换色

最新推荐文章于 2024-04-14 08:44:26 发布

mqingo

最新推荐文章于 2024-04-14 08:44:26 发布

阅读量199

点赞数

分类专栏： JavaScript 文章标签： JavaScript

本文链接：https://blog.csdn.net/mqingo/article/details/83963815

版权

JavaScript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

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

01表格隔行换色.html [标题行不换色]

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>01表格隔行换色</title>
		
        <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>
	<body onload="init()">
		<table border="1px" 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>
			<tr>
				<td>
					<input type="checkbox" />
				</td>
				<td>3</td>
				<td>美酒美食</td>
				<td>美酒</td>
				<td>葡萄酒</td>
				<td>
					<a href="#">修改</a>
					<a href="#">删除</a>
				</td>
			</tr>
			<tr>
				<td>
					<input type="checkbox" />
				</td>
				<td>4</td>
				<td>衣服特卖</td>
				<td>衣服</td>
				<td>什么样的衣服都有</td>
				<td>
					<a href="#">修改</a>
					<a href="#">删除</a>
				</td>
			</tr>
			<tr>
				<td>
					<input type="checkbox" />
				</td>
				<td>5</td>
				<td>美妆卖场</td>
				<td>美妆</td>
				<td>各式各样的美妆产品</td>
				<td>
					<a href="#">修改</a>
					<a href="#">删除</a>
				</td>
			</tr>
		</table>
	</body>
</html>

02表格隔行换色.html [标题行换色]

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>02表格隔行换色</title>
		
        <script>
		function init(){
						//得到表格
						var tab = document.getElementById("tab");
						//得到表格中每一行
						var rows = tab.rows;
						//遍历所有的行,然后根据奇数 偶数,使行得到不同颜色
						//标题行换色
						for(var i=0; i < rows.length; i++){
							var row = rows[i];  //得到其中的某一行
							if(i%2==0){
								row.bgColor = "yellow";
							}else{
								row.bgColor = "red";
							}
						}
						
						
					}
        </script>
	</head>
	<body onload="init()">
		<table border="1px" 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>
			<tr>
				<td>
					<input type="checkbox" />
				</td>
				<td>3</td>
				<td>美酒美食</td>
				<td>美酒</td>
				<td>葡萄酒</td>
				<td>
					<a href="#">修改</a>
					<a href="#">删除</a>
				</td>
			</tr>
			<tr>
				<td>
					<input type="checkbox" />
				</td>
				<td>4</td>
				<td>衣服特卖</td>
				<td>衣服</td>
				<td>什么样的衣服都有</td>
				<td>
					<a href="#">修改</a>
					<a href="#">删除</a>
				</td>
			</tr>
			<tr>
				<td>
					<input type="checkbox" />
				</td>
				<td>5</td>
				<td>美妆卖场</td>
				<td>美妆</td>
				<td>各式各样的美妆产品</td>
				<td>
					<a href="#">修改</a>
					<a href="#">删除</a>
				</td>
			</tr>
		</table>
	</body>
</html>