`
53873039oycg
  • 浏览: 841836 次
  • 性别: 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表格隔行变色鼠标滑过竖直表格内容变色效果

    本主题涉及的是使用jQuery实现的一种常见的用户界面优化技巧——"表格隔行变色"以及"鼠标滑过时竖直表格内容变色效果"。这种效果可以提升表格的可读性,使得数据更加清晰易辨。 首先,我们来讨论“表格隔行变色”。...

    实现表格的隔行变色

    本文将详细讲解如何实现表格的隔行变色,并提供相关的代码示例。 ### 一、CSS基础 隔行变色主要通过CSS(Cascading Style Sheets)来实现,CSS是用于描述HTML或XML(包括如SVG、MathML等各种XML方言)文档样式的...

    网页里面表格隔行变色代码

    在提供的文件"表格隔行变色.htm"中,很可能包含了以上代码示例的实际实现,你可以打开文件查看具体的HTML、CSS和JavaScript代码。理解这些基础知识对于任何Web开发者来说都是至关重要的,特别是在处理大量数据展示时...

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

    从给定的文件信息中,我们可以提炼出以下知识点: ### JavaScript表格隔行变色 ...通过上述知识点,我们可以系统地理解如何使用JavaScript和JQuery实现表格隔行变色和Tab标签页特效,以及这些技术在前端开发中的应用。

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

    在这个例子中,我们将深入探讨如何使用jQuery创建一个插件,以实现表格隔行变色以及鼠标滑过时的高亮显示效果。 首先,我们来看一下基本的HTML结构,这里包含了一个简单的表格,用于展示插件的效果: ```html ...

    jQuery隔行变色与普通JS写法的对比

    本文将详细介绍使用纯JavaScript和jQuery两种方法来实现表格隔行变色的详细步骤和代码实现。 首先,我们要了解隔行变色的作用。在表格数据展示时,如果数据较多,用户在浏览时可能会感到疲劳。为了提高数据的可视性...

    CSS+JS实现table隔行变色

    例如,使用jQuery库,我们可以监听表格的`DOMSubtreeModified`事件,一旦表格内容变化,就重新应用隔行变色: ```javascript $(document).ready(function() { $('.zebra-stripes').on('DOMSubtreeModified', ...

    JQ 隔行变色

    标题“JQ 隔行变色”指的是使用jQuery(简称JQ)库来实现HTML表格或其他列表元素的隔行变色效果。这种效果常见于数据展示,通过交替颜色增加可读性和视觉吸引力。让我们深入了解一下如何实现这个功能以及相关的...

    表格隔行变色,jquerys

    在本案例中,我们将探讨如何利用jQuery这一强大的JavaScript库来实现表格隔行变色的效果。 首先,jQuery是一个轻量级、高性能的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务。对于表格...

    jQuery实现简单隔行变色的方法

    关于使用jQuery实现表格中隔行变色效果的详细知识点主要涉及以下几个方面: 1. jQuery的基础知识:首先需要了解jQuery是一个快速、小巧且功能丰富的JavaScript库,它通过简化HTML文档遍历、事件处理、动画和Ajax...

    jquery 15天学习笔记 02 table表格 隔行变色的问题

    以下是一个基本的jQuery实现隔行变色的代码示例: ```javascript $(document).ready(function() { $("table tbody tr:nth-child(even)").css("background-color", "#F2F2F2"); $("table tbody tr:nth-child(odd)...

    jquery table鼠标滑过隔行变色表格样式代码

    jQuery 与 HTML 表格(table)的结合可以实现许多实用的功能,如本例中的“鼠标滑过隔行变色”效果。这种效果能够提升用户的交互体验,使得用户在浏览数据密集型表格时更容易区分每一行。 要实现这个功能,我们需要...

    jquery隔行换色和鼠标经过样式和标题提示效果.rar

    这样,当页面加载或者数据更新时,可以轻松地实现隔行变色的效果。 接下来,我们来看看“鼠标经过样式”。这是一种常见的用户交互设计,当用户将鼠标悬停在某个元素上时,该元素的样式会发生变化,如边框颜色、背景...

    实用的隔行变色,支持3种颜色.rar

    在IT领域,尤其是在网页开发中,隔行变色是一种常见的视觉设计技巧,它可以使列表或者表格看起来更加清晰,便于阅读。这个"实用的隔行变色,支持3种颜色.rar"压缩包文件提供了实现这一效果的资源,适用于JavaScript...

    jQuery轻松实现表格的隔行变色和点击行变色的实例代码

    总结来说,本文提供的实例代码不仅清晰地演示了如何用jQuery实现表格的隔行变色和点击行变色,而且强调了jQuery在网页交互设计中的实用性和有效性。通过编写简单的jQuery脚本,可以极大地增强网页的功能和用户的交互...

    隔行颜色不同、隔行颜色不同

    总结来说,实现“隔行颜色不同”的效果主要依靠CSS的`:nth-child()`伪类选择器,以及jQuery提供的事件处理和DOM操作。这个技巧不仅提高了数据的可读性,还可以结合其他交互设计,提升用户体验。在实际项目中,可以...

    webpack基础使用,实现隔行变色效果

    总结来说,这个项目是一个基础的 Webpack 使用示例,展示了如何配置 Webpack 以及使用 jQuery 实现隔行变色效果。通过学习这个项目,你可以更好地理解 Webpack 的工作原理,以及如何利用它来管理和构建前端项目。

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

    总结起来,通过结合CSS和jQuery,我们可以实现表格的隔行变色以及高亮当前选择行的效果,提升用户在浏览表格数据时的视觉体验。这个方法不仅适用于这个特定的示例,也可以灵活应用到其他类似的表格美化场景中。

    jQuery 表格隔行变色代码[修正注释版]

    在示例代码中,此方法被用来分别为奇数行和偶数行添加不同的CSS类,从而实现隔行变色的效果: ```javascript $('tr').addClass('odd'); // 为所有元素添加'odd'类 $('tr:even').addClass('even'); // 为索引为偶数的...

Global site tag (gtag.js) - Google Analytics