欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

jquery怎么实现奇偶行不同颜色

程序员文章站 2022-04-17 12:48:48
...

在jquery中,可以使用“$(":odd")”和“$(":even")”选择器分别选中奇行和偶行的元素,然后使用css()方法分别给奇行和偶行元素设置不同的颜色样式即可实现奇偶行不同颜色。

jquery怎么实现奇偶行不同颜色

本教程操作环境:windows7系统、jquery1.7.2版本,Dell G3电脑。

推荐教程:jquery视频教程

jquery奇偶行不同颜色的示例

<!DOCTYPE html>
<html>
	<head>
		<title>Insert a title</title>
		<meta charset="utf-8">
		<script src="demo/js/jquery-1.7.2.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {

				$("#Table tr:odd").css("background-color", "#e6e6fa");
				$("#Table tr:even").css("background-color", "#fff0fa");
			});
		</script>
	</head>

	<body>
		<table id="Table">
			<tr>
				<td>第一行</td>
			</tr>
			<tr>
				<td>第二行</td>
			</tr>
			<tr>
				<td>第三行</td>
			</tr>
			<tr>
				<td>第四行</td>
			</tr>
		</table>

	</body>

</html>

效果图:

jquery怎么实现奇偶行不同颜色

说明:

jQuery :odd 选择器可以选取每个带有奇数 index 值的元素(比如 1、3、5)。

jQuery :even 选择器可以选取每个带有偶数 index 值的元素(比如 2、4、6)。

其中,index 值从 0 开始,所有第一个元素是偶数 (0)。

更多编程相关知识,请访问:编程教学!!

以上就是jquery怎么实现奇偶行不同颜色的详细内容,更多请关注其它相关文章!

相关标签: jquery 奇偶行