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

最新推荐文章于 2022-02-23 16:47:44 发布
最新推荐文章于 2022-02-23 16:47:44 发布 · 255 阅读 · 1
文章标签：

#javascript #ViewUI

本文演示了如何使用jQuery为表格添加隔行变色效果，包括包含和不包含th的变色方式，以及不同变色间隔的实现。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

         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>

    结果如下：

   

   

  

  

 

    全文完。

jquery如何实现隔行变色
tiankai戈
01-18 3255
实现隔行变色代码如下 描述:通过jQuery控制表格的奇数行和偶数行的颜色不一样，鼠标经过的时候，颜色变成白色，鼠标离开，颜色恢复原来的颜色。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>高级隔行变色</title> <style> *{ padding: 0;
简单实现jquery隔行变色
10-19
在前端开发过程中，使用jQuery来实现隔行变色效果是一种常见的需求，能够帮助改善用户界面的可读性，使得表格、列表等元素的展示更加人性化。本文将详细介绍如何通过jQuery实现隔行变色的几种方法，并提供具体实例...
jQuery隔行换色
ahao4311的博客
02-20 338
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="../../js/jquery-2.1.0.min.js"></s...
jquery实现隔行变色效果
全世界的屋顶
03-20 1363
简单各行变色 //使用jquery加载事件 $(document).ready(function (){ var oldcolor; $("tr").each(function (index,domEle){ if(index%2==0){ //设置偶数行的背景颜色 $(domEle).css("background","#ffff99"); }else
jquery隔行变色案例
小羊的博客
02-23 369
jquery隔行变色案例
jQuery实例入门(表格隔行变色)
天祺围棋
11-17 707
 html xmlns="http://www.w3.org/1999/xhtml" >head>    title>无标题页title>    link href="StyleSheet.css" rel="stylesheet" type="text/css" />    script type="text/javascript" src="jquery/jqu
jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码
10-22
在这个例子中，我们将深入探讨如何使用jQuery创建一个插件，以实现表格隔行变色以及鼠标滑过时的高亮显示效果。 首先，我们来看一下基本的HTML结构，这里包含了一个简单的表格，用于展示插件的效果： ```html ...
jQuery隔行变色与普通JS写法的对比
10-27
本文将详细介绍使用纯JavaScript和jQuery两种方法来实现表格隔行变色的详细步骤和代码实现。 首先，我们要了解隔行变色的作用。在表格数据展示时，如果数据较多，用户在浏览时可能会感到疲劳。为了提高数据的可视性...
jQuery实现简单隔行变色的方法
10-22
关于使用jQuery实现表格中隔行变色效果的详细知识点主要涉及以下几个方面： 1. jQuery的基础知识：首先需要了解jQuery是一个快速、小巧且功能丰富的JavaScript库，它通过简化HTML文档遍历、事件处理、动画和Ajax...
jQuery实现Table表格隔行变色及高亮显示当前选择行效果示例
12-04
总结起来，通过结合CSS和jQuery，我们可以实现表格的隔行变色以及高亮当前选择行的效果，提升用户在浏览表格数据时的视觉体验。这个方法不仅适用于这个特定的示例，也可以灵活应用到其他类似的表格美化场景中。
jquery的案例-隔行换色
水巷石子的博客
09-18 3038
jquery的案例-隔行换色 <!--导入js--> <script type="text/javascript" src="../js/jquery-3.3.1.js"></script> <script type="text/javascript"> $(function () { $("tr:gt(1):even").css("background-color","red"); $("tr:gt(1):odd").css("bac
jquery_demo 表格隔行变色案例
酱子
06-26 218
jquery_demo 表格隔行变色案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"&g
jQuery实现隔行变色
蒗若晨曦
03-28 656
//实现table隔行变色超级简单的代码 .one{ background:#C00; } .two{ background:#09F; } $(document).ready(function(){ $("tr:even").addClass("one");//奇数行 $("tr:odd").addClass("two");//偶数行 }
用jquery实现隔行变色
madanling的专栏
03-21 639
//-------------------处理隔行变色------------  /*  jquery实现表格的隔行变色思路：  1）获取所有的tr  2）遍历tr  3）处理当鼠标移动到上面的时候获得颜色，当离开的时候恢复颜色  */  $("tr").each(function(index,domEle){      if(index%2==0){        $(do
使用JQuery实现隔行变色
yecats的博客
05-27 506
使用JQuery实现隔行变色 body{ font-size:12px; text-align:center; } #tbStu{ width:260px; border:solid 1px #666; background-color:#eee; } #tbStu tr{ line-height:23px; } #tbStu th{ bac
Jquery 实现隔行变色
wangduowu的博客
06-26 213
  1. javaScript实现隔行变色： &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt; &lt;html&gt; &lt;head&gt; &lt;style type="text/css"&am
用jQuery实现的隔行变色效果
weixin_34129696的博客
11-28 134
<!doctype html><html> <title>用jQuery实现的隔行变色的效果</title> <body> <ul> <li>我是今天</li> ...
jQuery 应用案例1——table隔行变色
wuhan_yking的博客
10-22 474
一、参考文档地址 http://hemin.cn/jq/index.html 二、使用jquery实现table隔行变色 ① $(function{     $('#table tr:even').css('backgroundColor','red');     $('#table tr:odd').css('backgroundColor','blue'); }) ②一行代码实
jquery隔行变色
最新发布
06-20
jQuery 是一个流行的 JavaScript 框架，用于简化 HTML 文档遍历、事件处理、动画和 AJAX 功能等。要实现表格（通常是 `<table>`）隔行变色，你可以使用 jQuery 的 `each()` 方法结合 CSS 类选择器。以下是一个简单的示例： ```javascript $(document).ready(function() { // 获取所有的 table 行 var rows = $("table tr"); // 遍历每一行 rows.each(function(index) { // 如果索引是偶数（即行号为2的倍数），给它添加一个类，如"even-row" if (index % 2 == 0) { $(this).addClass("even-row"); } // 如果索引是奇数，给它添加另一个类，如"odd-row" else { $(this).addClass("odd-row"); } }); }); ``` 然后，在你的 CSS 中定义 `.even-row` 和 `.odd-row` 类的背景颜色： ```css .even-row { background-color: #f2f2f2; /* 偶数行背景色 */ } .odd-row { background-color: #ffffff; /* 奇数行背景色 */ } ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值