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来实现隔行变色效果是一种常见的需求，能够帮助改善用户界面的可读性，使得表格、列表等元素的展示更加人性化。本文将详细介绍如何通过jQuery实现隔行变色的几种方法，并提供具体实例...
本主题涉及的是使用jQuery实现的一种常见的用户界面优化技巧——"表格隔行变色"以及"鼠标滑过时竖直表格内容变色效果"。这种效果可以提升表格的可读性，使得数据更加清晰易辨。 首先，我们来讨论“表格隔行变色”。...
本文将详细讲解如何实现表格的隔行变色，并提供相关的代码示例。 ### 一、CSS基础 隔行变色主要通过CSS（Cascading Style Sheets）来实现，CSS是用于描述HTML或XML（包括如SVG、MathML等各种XML方言）文档样式的...
在提供的文件"表格隔行变色.htm"中，很可能包含了以上代码示例的实际实现，你可以打开文件查看具体的HTML、CSS和JavaScript代码。理解这些基础知识对于任何Web开发者来说都是至关重要的，特别是在处理大量数据展示时...
从给定的文件信息中，我们可以提炼出以下知识点： ### JavaScript表格隔行变色 ...通过上述知识点，我们可以系统地理解如何使用JavaScript和JQuery实现表格隔行变色和Tab标签页特效，以及这些技术在前端开发中的应用。
在这个例子中，我们将深入探讨如何使用jQuery创建一个插件，以实现表格隔行变色以及鼠标滑过时的高亮显示效果。 首先，我们来看一下基本的HTML结构，这里包含了一个简单的表格，用于展示插件的效果： ```html ...
本文将详细介绍使用纯JavaScript和jQuery两种方法来实现表格隔行变色的详细步骤和代码实现。 首先，我们要了解隔行变色的作用。在表格数据展示时，如果数据较多，用户在浏览时可能会感到疲劳。为了提高数据的可视性...
例如，使用jQuery库，我们可以监听表格的`DOMSubtreeModified`事件，一旦表格内容变化，就重新应用隔行变色： ```javascript $(document).ready(function() { $('.zebra-stripes').on('DOMSubtreeModified', ...
标题“JQ 隔行变色”指的是使用jQuery（简称JQ）库来实现HTML表格或其他列表元素的隔行变色效果。这种效果常见于数据展示，通过交替颜色增加可读性和视觉吸引力。让我们深入了解一下如何实现这个功能以及相关的...
在本案例中，我们将探讨如何利用jQuery这一强大的JavaScript库来实现表格隔行变色的效果。 首先，jQuery是一个轻量级、高性能的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务。对于表格...
关于使用jQuery实现表格中隔行变色效果的详细知识点主要涉及以下几个方面： 1. jQuery的基础知识：首先需要了解jQuery是一个快速、小巧且功能丰富的JavaScript库，它通过简化HTML文档遍历、事件处理、动画和Ajax...
以下是一个基本的jQuery实现隔行变色的代码示例： ```javascript $(document).ready(function() { $("table tbody tr:nth-child(even)").css("background-color", "#F2F2F2"); $("table tbody tr:nth-child(odd)...
jQuery 与 HTML 表格（table）的结合可以实现许多实用的功能，如本例中的“鼠标滑过隔行变色”效果。这种效果能够提升用户的交互体验，使得用户在浏览数据密集型表格时更容易区分每一行。 要实现这个功能，我们需要...
这样，当页面加载或者数据更新时，可以轻松地实现隔行变色的效果。 接下来，我们来看看“鼠标经过样式”。这是一种常见的用户交互设计，当用户将鼠标悬停在某个元素上时，该元素的样式会发生变化，如边框颜色、背景...
在IT领域，尤其是在网页开发中，隔行变色是一种常见的视觉设计技巧，它可以使列表或者表格看起来更加清晰，便于阅读。这个"实用的隔行变色,支持3种颜色.rar"压缩包文件提供了实现这一效果的资源，适用于JavaScript...
总结来说，本文提供的实例代码不仅清晰地演示了如何用jQuery实现表格的隔行变色和点击行变色，而且强调了jQuery在网页交互设计中的实用性和有效性。通过编写简单的jQuery脚本，可以极大地增强网页的功能和用户的交互...
总结来说，实现“隔行颜色不同”的效果主要依靠CSS的`:nth-child()`伪类选择器，以及jQuery提供的事件处理和DOM操作。这个技巧不仅提高了数据的可读性，还可以结合其他交互设计，提升用户体验。在实际项目中，可以...
总结来说，这个项目是一个基础的 Webpack 使用示例，展示了如何配置 Webpack 以及使用 jQuery 实现隔行变色效果。通过学习这个项目，你可以更好地理解 Webpack 的工作原理，以及如何利用它来管理和构建前端项目。
总结起来，通过结合CSS和jQuery，我们可以实现表格的隔行变色以及高亮当前选择行的效果，提升用户在浏览表格数据时的视觉体验。这个方法不仅适用于这个特定的示例，也可以灵活应用到其他类似的表格美化场景中。
在示例代码中，此方法被用来分别为奇数行和偶数行添加不同的CSS类，从而实现隔行变色的效果： ```javascript $('tr').addClass('odd'); // 为所有元素添加'odd'类 $('tr:even').addClass('even'); // 为索引为偶数的...