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'); // 为索引为偶数的...