JQ表格的隔行换色

最新推荐文章于 2019-08-21 22:27:52 发布

云飞扬°

最新推荐文章于 2019-08-21 22:27:52 发布

阅读量718

点赞数

分类专栏： JQuery 文章标签： JQ表格的隔行换色

本文链接：https://blog.csdn.net/weixin_44706512/article/details/90319360

版权

JQuery 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

JQ表格的隔行换色

步骤：

1.导入JQ的包
		
2.文档加载完成函数：页面初始化
		
3.获得所有的行：元素选择器
			
4.根据行号(奇偶数)去修改颜色

方法：

修改偶数行 序号大于0的
$("tr:even:gt(0)").css("background-color","yellow");
				
修改奇数行
$("tr:odd").css("background-color","blue");

完整代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>
		<script>
			$(function(){
				//获得所有的行：元素选择器
				//修改偶数行 序号大于0的
				$("tr:even:gt(0)").css("background-color","yellow");
				//修改奇数行
				$("tr:odd").css("background-color","blue");
			});
		</script>
		
		
		
	</head>
	<body>
		<table border="1px" width="600px" id="tab">
		<tr>
			<td><input type="checkbox" onclick="checkAll()" id="check1"/></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>海尔，TCL，康佳</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>
	</table>			
	</body>
</html>

运行截图：