网站建设资讯

NEWS

网站建设资讯

jquery实现奇偶行不同颜色的方法

这篇文章主要介绍了jquery实现奇偶行不同颜色的方法,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

网站建设哪家好,找创新互联公司!专注于网页设计、网站建设、微信开发、成都微信小程序、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了资阳免费建站欢迎大家使用!

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

jquery奇偶行不同颜色的示例



	
		Insert a title
		
		
		
			$(document).ready(function() {

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

	
		
			
				第一行
			
			
				第二行
			
			
				第三行
			
			
				第四行
			
		

	

效果图:

jquery实现奇偶行不同颜色的方法

说明:

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

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

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

感谢你能够认真阅读完这篇文章,希望小编分享的“jquery实现奇偶行不同颜色的方法”这篇文章对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,更多相关知识等着你来学习!


分享文章:jquery实现奇偶行不同颜色的方法
分享地址:http://njwzjz.com/article/jcgjpe.html