jQuery 实现table隔行变色

最新推荐文章于 2024-07-12 18:29:20 发布

1990_super

最新推荐文章于 2024-07-12 18:29:20 发布

阅读量1.5k

点赞数 3

分类专栏： jQuery 文章标签： table隔行变色 jquery

本文链接：https://blog.csdn.net/runbat/article/details/52042321

版权

jQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

使用jQuery 的集合处理能力简洁的实现table表格的隔行变色功能。

先来看实现代码

<!DOCTYPE html>
<html>
<head>
<title>jQuery 集合处理能力</title>
<script type="text/javascript" src="../jquery-1.8.2.min.js"></script>
 <script type="text/javascript">
	$(function() {
		$("tr:not(:first)").each(function(i){
			this.style.backgroundColor = ['#eee','#fff'][i % 2];
		})
	});
 </script>
 <style type="text/css">
	body {font-size:12px; text-align:center;}
	#tbStu {width:260px;border:solid 1px #666;background-color:#666}
	#tbStu tr {line-height:23px}
	#tbStu tr th{background-color:#ccc;color:#fff}
 </style>
</head>
<body>
<table id="tbStu">
 <tbody>
	<tr><th>姓名</th><th>性别</th><th>总分</th></tr>
	<tr><td>super</td><td>男</td><td>101</td></tr>
	<tr><td>super</td><td>男</td><td>101</td></tr>
	<tr><td>super</td><td>男</td><td>101</td></tr>
	<tr><td>super</td><td>男</td><td>101</td></tr>
 </tbody>
</table>
</body>
</html>

其中用到了each方法，$.each()是jquery的工具函数，可以遍历数组或者对象，这里遍历的是对象，jquery 选择器
$("tr:not(:first)")选中的是页面上除第一行所有的tr，是tr对象的集合，用each可以逐个获取，i是集合的下标，
在jquery中，集合元素如果想快速选择其中一项，无需循环遍历，可以直接采用['元素1','元素2' ,'元素3'][索引号]<的方式。