`
53873039oycg
  • 浏览: 821069 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

[简单]jQuery隔行变色简单示例

阅读更多

         jQuery给表格添加隔行变色效果,代码如下

        

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>隔行变色测试</title>
<style>
* {
	font-family: 'MICROSOFT YAHEI';
	margin: 0;
	padding: 0;
}

#oddDiv,#oddNotThDiv,#per2Div,#per3Div {
	width: 900px;
	margin: 3px auto;
	padding: 15px 10px;
	text-align: center;
	border: 1px solid #bdf3d4;
	text-align: center;
}

table {
	width: 100%;
}

.odd {
	background: #cbf5fb;
}

.even {
	background: #f4f4f4;
}

.hover {
	background: #bdf3d4;
	color: #FFFFFF;
}

#oddNotThDiv  table tr th,#per2Div table tr th,#per3Div table tr th {
	background: #fad8be;
}
</style>
<script type="text/javascript" src="../../js/jquery-2.1.0.js"></script>
<script>
	$(function() {
		$("#oddDiv tr:odd").addClass("odd");//奇数
		$("#oddDiv tr:even").addClass("even");
		$("#oddDiv tr").hover(function() {
			$(this).addClass("hover");
		}, function() {
			$(this).removeClass("hover");
		});

		$("#oddNotThDiv tr:not(:has(th)):odd").addClass("odd");
		$("#oddNotThDiv tr:not(:has(th)):even").addClass("even");

		$('#per2Div table tr:not(:has(th))').addClass(function(i) {
			return i % 3 == 0 ? "odd" : "";
			/* i%(n+1)==0 */
		});
		$('#per3Div table tr:not(:has(th))').addClass(function(i) {
			return i % 4 > 1 ? "odd" : "";
		});

		$("#oddNotThDiv tr:not(:has(th)),#per2Div tr:not(:has(th)),#per3Div tr:not(:has(th))")
				.hover(function() {
					$(this).addClass("hover");
				}, function() {
					$(this).removeClass("hover");
				});

	});
</script>
</head>
<body>
	<div id="oddDiv">
		<h4>隔行变色(th计算在内)</h4>
		<br />
		<table cellpadding="0" cellspacing="0" border="0">
			<colgroup>
				<col width="10%">
				<col width="20%">
				<col width="20%">
				<col width="20%">
				<col width="15%">
				<col width="15%">
			</colgroup>
			<tr>
				<th>操作</th>
				<th>地市</th>
				<th>县市</th>
				<th>营销名称</th>
				<th>原价</th>
				<th>优惠价</th>
			</tr>
			<tr>
				<td>删除</td>
				<td>测试</td>
				<td>测试</td>
				<td>测试名称</td>
				<td>900</td>
				<td>800</td>
			</tr>
			<tr>
				<td>删除2</td>
				<td>测试2</td>
				<td>测试2</td>
				<td>测试名称2</td>
				<td>900</td>
				<td>800</td>
			</tr>
			<tr>
				<td>删除3</td>
				<td>测试3</td>
				<td>测试3</td>
				<td>测试名称3</td>
				<td>900</td>
				<td>800</td>
			</tr>
			<tr>
				<td>删除4</td>
				<td>测试4</td>
				<td>测试4</td>
				<td>测试名称4</td>
				<td>900</td>
				<td>800</td>
			</tr>
		</table>
	</div>
	<div id="oddNotThDiv">
		<h4>隔行变色(不包含th)</h4>
		<br />
		<table cellpadding="0" cellspacing="0" border="0">
			<colgroup>
				<col width="10%">
				<col width="20%">
				<col width="20%">
				<col width="20%">
				<col width="15%">
				<col width="15%">
			</colgroup>
			<tr>
				<th>操作</th>
				<th>地市</th>
				<th>县市</th>
				<th>营销名称</th>
				<th>原价</th>
				<th>优惠价</th>
			</tr>
			<tr>
				<td>删除</td>
				<td>测试</td>
				<td>测试</td>
				<td>测试名称</td>
				<td>900</td>
				<td>800</td>
			</tr>
			<tr>
				<td>删除2</td>
				<td>测试2</td>
				<td>测试2</td>
				<td>测试名称2</td>
				<td>900</td>
				<td>800</td>
			</tr>
			<tr>
				<td>删除3</td>
				<td>测试3</td>
				<td>测试3</td>
				<td>测试名称3</td>
				<td>900</td>
				<td>800</td>
			</tr>
			<tr>
				<td>删除4</td>
				<td>测试4</td>
				<td>测试4</td>
				<td>测试名称4</td>
				<td>900</td>
				<td>800</td>
			</tr>
		</table>
	</div>

	<div id="per2Div">
		<h4>隔2行变色(不包含th)</h4>
		<br />
		<table cellpadding="0" cellspacing="0" border="0">
			<colgroup>
				<col width="10%">
				<col width="20%">
				<col width="20%">
				<col width="20%">
				<col width="15%">
				<col width="15%">
			</colgroup>
			<tr>
				<th>操作</th>
				<th>地市</th>
				<th>县市</th>
				<th>营销名称</th>
				<th>原价</th>
				<th>优惠价</th>
			</tr>
			<tr>
				<td>删除</td>
				<td>测试</td>
				<td>测试</td>
				<td>测试名称</td>
				<td>900</td>
				<td>800</td>
			</tr>
			<tr>
				<td>删除2</td>
				<td>测试2</td>
				<td>测试2</td>
				<td>测试名称2</td>
				<td>900</td>
				<td>800</td>
			</tr>
			<tr>
				<td>删除3</td>
				<td>测试3</td>
				<td>测试3</td>
				<td>测试名称3</td>
				<td>900</td>
				<td>800</td>
			</tr>
			<tr>
				<td>删除4</td>
				<td>测试4</td>
				<td>测试4</td>
				<td>测试名称4</td>
				<td>900</td>
				<td>800</td>
			</tr>
			<tr>
				<td>删除5</td>
				<td>测试5</td>
				<td>测试5</td>
				<td>测试名称5</td>
				<td>900</td>
				<td>800</td>
			</tr>
			<tr>
				<td>删除6</td>
				<td>测试6</td>
				<td>测试6</td>
				<td>测试名称6</td>
				<td>900</td>
				<td>800</td>
			</tr>
		</table>
	</div>
	<div id="per3Div">
		<h4>2行2行变色(不包含th)</h4>
		<br />
		<table cellpadding="0" cellspacing="0" border="0">
			<colgroup>
				<col width="10%">
				<col width="20%">
				<col width="20%">
				<col width="20%">
				<col width="15%">
				<col width="15%">
			</colgroup>
			<tr>
				<th>操作</th>
				<th>地市</th>
				<th>县市</th>
				<th>营销名称</th>
				<th>原价</th>
				<th>优惠价</th>
			</tr>
			<tr>
				<td>删除</td>
				<td>测试</td>
				<td>测试</td>
				<td>测试名称</td>
				<td>900</td>
				<td>800</td>
			</tr>
			<tr>
				<td>删除2</td>
				<td>测试2</td>
				<td>测试2</td>
				<td>测试名称2</td>
				<td>900</td>
				<td>800</td>
			</tr>
			<tr>
				<td>删除3</td>
				<td>测试3</td>
				<td>测试3</td>
				<td>测试名称3</td>
				<td>900</td>
				<td>800</td>
			</tr>
			<tr>
				<td>删除4</td>
				<td>测试4</td>
				<td>测试4</td>
				<td>测试名称4</td>
				<td>900</td>
				<td>800</td>
			</tr>
			<tr>
				<td>删除5</td>
				<td>测试5</td>
				<td>测试5</td>
				<td>测试名称5</td>
				<td>900</td>
				<td>800</td>
			</tr>
			<tr>
				<td>删除6</td>
				<td>测试6</td>
				<td>测试6</td>
				<td>测试名称6</td>
				<td>900</td>
				<td>800</td>
			</tr>
		</table>
	</div>
</body>
</html>

    结果如下

   

   

  

  

 

    全文完

  • 大小: 56.4 KB
  • 大小: 56.8 KB
  • 大小: 74.6 KB
  • 大小: 73.1 KB
0
0
分享到:
评论

相关推荐

    jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码

    主要介绍了jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码,涉及jQuery针对页面元素动态操作及响应鼠标事件动态修改页面元素样式的相关技巧,需要的朋友可以参考下

    jQuery实现Table表格隔行变色及高亮显示当前选择行效果示例

    本文实例讲述了jQuery实现Table表格隔行变色及高亮显示当前选择行效果。分享给大家供大家参考,具体如下: 最近客户要求高亮选择列表的功能,于是顺便做了个,作为记录。 前台代码: &lt;!DOCTYPE ...

    jquery入门—选择器实现隔行变色实例代码

    3、使用JQuery选择器实现隔行变色,示例代码如下: 代码如下: &lt;!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”&gt; &lt;HTML&gt; &lt;HEAD&gt; &lt;TITLE&gt; 使用JQuery实现隔行变色 &lt;/TITLE...

    JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】

    本文实例讲述了JavaScript表格隔行变色和Tab标签页特效。分享给大家供大家参考,具体如下: 最近一直在看JavaScript知识,偶尔也穿插一点Jquery,感觉Jquery用起来真爽,减少了很多的代码量,而且学习也不是很高。接...

    jquery实现表格隔行换色效果

    下面一个示例为大家详细介绍下使用jquery实现表格的隔行换色功能,感兴趣的朋友可以参考下

    jquery入门—数据删除与隔行变色以及图片预览

    1、功能需求:表格中数据隔行变色、删除数据、全选删除、鼠标移动到图片时显示图片预览 2、示例代码如下: 代码如下: &lt;!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”&gt; &lt;HTML&gt; &lt;HEAD&...

    jQuery权威指南

    共10章,两个综合案例(图片切割,在线聊天室),118个示例(JavaScript隔行变色,jQuery选择器隔行变色,JavaScript输出文字信息,jQuery输出文字信息,基本选择器选择元素,层次选择器选择元素,基本过滤选择器...

    使用jquery hover事件实现表格的隔行换色功能示例

    hover(over,out)一个模仿悬停事件的方法,下面一个示例为大家详细介绍下使用jquery实现表格的隔行换色功能,感兴趣的朋友可以参考下

    jQuery权威指南-源代码

    其次详细讲解了jQuery的各种选择器、jQuery操作DOM的方法、jQuery中的事件与应用、jQuery中的动画和特效、Ajax在jQuery中的应用,以及各种常用的jQuery插件的使用方法和技巧,所有这些知识点都配有完整的示例(包括...

    JQuery&CSS;&CSS;+DIV实例大全.rar

    简单jquery背景滑动菜单插件示例 39.经典jQuery三级省、市、县级联菜单下载 40.漂亮jQuery+CSS橙黄色两级导航菜单示例下载 41.漂亮jQuery+CSS竖直菜单下拉展开菜单(手风琴)动画缓冲效果 42.漂亮jQuery四级滑...

    autoJS1688示例.zip

    list隔行变色.js long.js long2.js ls_socket.js lunar.js LZ动作.js main(1)(1).js main(1)(2).js main(1)(3).js main(1)(4).js main(1).js main(10).js Main(11).js main(12).js main(13).js main...

Global site tag (gtag.js) - Google Analytics