jquery实现隔行变色

最新推荐文章于 2025-08-16 09:42:10 发布
最新推荐文章于 2025-08-16 09:42:10 发布
阅读量917 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： jquery function table html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/zhiming1164/article/details/6521106

 

Code:
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  2. <html>  
  3.   <head>  
  4.     <title>ghcolor.html</title>  
  5.       
  6.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
  7.     <meta http-equiv="description" content="this is my page">  
  8.     <meta http-equiv="content-type" content="text/html; charset=UTF-8">  
  9.       
  10.     <script type="text/javascript" src="./js/jquery-1.4.4.js"></script>  
  11.     <script type="text/javascript">  
  12.         $(function(){  
  13.           
  14.             $("tr:even").addClass("even");//基数行  
  15.             $("tr:odd").addClass("odd");//偶数行   
  16.               
  17.             $("tr:even").hover(  
  18.                 function(){  
  19.                     clr = $(this).css("background-color");  
  20.                     $(this).css("background-color","red");  
  21.   
  22.                 },function(){  
  23.                      $(this).css("background-color",clr);  
  24.                  }  
  25.             );  
  26.             $("tr:odd").hover(  
  27.                 function(){  
  28.                     clr = $(this).css("background-color");  
  29.                     $(this).css("background-color","blue");  
  30.   
  31.                 },function(){  
  32.                      $(this).css("background-color",clr);  
  33.                  }  
  34.             );  
  35.         });  
  36.     </script>  
  37.     <style type="text/css">  
  38.         .even{  
  39.             background-color:gray;  
  40.         }  
  41.         .odd{  
  42.             background-color:green;  
  43.         }  
  44.     </style>  
  45.   </head>  
  46.     
  47.   <body>  
  48.     <table>  
  49.         <thead>  
  50.         <tr>  
  51.             <th>序号</th>  
  52.             <th>姓名</th>  
  53.             <th>昵称</th>  
  54.             <th>性别</th>  
  55.         </tr>  
  56.         </thead>  
  57.         <tbody>  
  58.             <tr>  
  59.                 <td>1</td>  
  60.                 <td>陈志明</td>  
  61.                 <td>GoodWell</td>  
  62.                 <td>男</td>  
  63.             </tr>  
  64.             <tr>  
  65.                 <td>2</td>  
  66.                 <td>陈志明</td>  
  67.                 <td>GoodWell</td>  
  68.                 <td>男</td>  
  69.             </tr>  
  70.             <tr>  
  71.                 <td>3</td>  
  72.                 <td>陈志明</td>  
  73.                 <td>GoodWell</td>  
  74.                 <td>男</td>  
  75.             </tr>  
  76.             <tr>  
  77.                 <td>4</td>  
  78.                 <td>陈志明</td>  
  79.                 <td>GoodWell</td>  
  80.                 <td>男</td>  
  81.             </tr>  
  82.         </tbody>  
  83.     </table>  
  84.   </body>  
  85. </html>  

 

zhiming1164
关注
使用jQuery实现表格的隔行变色
HackMasterX的博客
10-03 669
隔行变色是Web开发中常见的需求之一，通过给表格的奇偶行添加不同的背景色，可以增加表格的可读性和美观性。在本文中，我们将介绍如何使用jQuery来实现这个功能。接下来，我们需要给目标表格的奇偶行添加不同的背景色。我们可以使用jQuery的选择器和遍历方法来实现这个功能。首先，我们需要在页面中引入jQuery库。你可以将以上代码复制到你的HTML文件中，并根据需要修改选择器和颜色值来适应你的具体情况。在迭代的过程中，根据行的奇偶性使用。选择器选中了表格中的所有行，并使用。在上面的代码中，我们使用了。
使用DOM方法实现表格的隔行变色效果
摘取天上星
11-15 1070
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> 无标题文档 -->         111111111111  111111111111         222222222222  22
JQuery 实现隔行变色效果
m0_50873883的博客
07-19 696
前端代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>隔行变色</title> </head> <body> <table border="1px solid #ccc" cellpadding="0" cellpadding="0"> <thead> <tr> .
jQuery实现隔行变色
qianzihao007
01-13 2578
简介：这里我主要用到了jQuery的两个方法odd(偶数),even(奇数) 一，html页面 <form> <div> <label>姓名</label> <input type="text" id="name"> </div> <div> <label>年龄</label>
jquery如何实现隔行变色
tiankai戈
01-18 3255
实现隔行变色代码如下 描述:通过jQuery控制表格的奇数行和偶数行的颜色不一样，鼠标经过的时候，颜色变成白色，鼠标离开，颜色恢复原来的颜色。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>高级隔行变色</title> <style> *{ padding: 0;
jquery实现表格隔行变色
LHH201016的博客
08-22 1973
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>变色表格</title> <script src="jquery-3.6.0.js"></script> </head> <body> <table b...
4.使用jQuery实现隔行变色
LiGuogang
11-28 542
&amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;title&amp;gt;使用jQuery实现隔行变色&amp;lt;/title&amp;gt; &amp;lt;style type=&quot;text/css&quot;&amp;gt; body{
jQuery--表格隔行变色
qq_52567967的博客
09-27 2842
jQuery--表格隔行变色
jquery实现隔行变色效果
全世界的屋顶
03-20 1363
简单各行变色 //使用jquery加载事件 $(document).ready(function (){ var oldcolor; $("tr").each(function (index,domEle){ if(index%2==0){ //设置偶数行的背景颜色 $(domEle).css("background","#ffff99"); }else
JS与jQuery实现隔行变色的方法
10-21
总之，JavaScript和jQuery都能有效地实现隔行变色，但jQuery的简洁性和易用性使其在大多数情况下成为首选。同时，开发者应当根据项目需求和团队习惯选择最合适的实现方式，并注意保持代码的可维护性和可扩展性。
jQuery实现隔行变色的方法分析(对比原生JS)
10-21
本文将深入探讨如何使用jQuery实现隔行变色，并与原生JavaScript进行对比。 首先，我们来看原生JavaScript实现隔行变色的方法。通过`document.getElementsByTagName`方法，我们可以获取到页面上的所有表格元素...
jQuery实现简单隔行变色的方法
01-19
本文实例讲述了jQuery实现简单隔行变色的方法。分享给大家供大家参考，具体如下： <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> &...
HTML第三次作业
2301_81538927的博客
08-13 1145
【代码】html第三次作业。
html二次作业
s20231129的博客
08-15 277
1.完成自己学校的官方网站，动态内容直接贴图即可，至少三个不同的页面。2.自己寻找一个大型的网站，完成至少三个页面，其中必须包含登录页面。
【web站点安全开发】任务4：JavaScript与HTML/CSS的完美协作指南
不羁的博客
08-14 960
本文介绍了JavaScript在前端开发中的核心作用及其与HTML、CSS的协作方式。主要内容包括：1. JavaScript语言特性，通过对比表格展示其与Java在类型系统、面向对象、执行方式等方面的本质区别；2. JavaScript在HTML中的使用方法，包括<script>标签的三种放置位置（head/body/外部文件）；3. 四种常用输出方式（alert/write/innerHTML/console.log）；4. 语法特性比较（变量声明、数据类型、函数定义等）等
HTML 框架：构建网页布局的基石
froginwe11的博客
08-16 376
HTML 框架是一种网页布局技术，它允许开发者将网页划分为多个区域，并对这些区域进行精细的控制。通过使用框架，可以轻松实现网页的标题、导航栏、页脚等部分的布局，提高网页的可用性和用户体验。HTML 框架是网页设计中不可或缺的一部分，它为网页布局提供了强大的支持。通过了解 HTML 框架的种类、应用以及如何使用它们，开发者可以创建更加美观、易用的网页。
【HTML】在页面中画一条0.5px的线
L_xxxxxxx的博客
08-13 254
【HTML】在页面中画一条0.5px的线
html模拟websocket通信
最新发布
肖肖肖丽珠的博客
08-16 645
未连接
用jQuery实现隔行变色
06-08
要使用jQuery实现隔行变色，可以使用以下代码： ```javascript $(document).ready(function(){ // 选择表格中需要变色的行 $("tr:even").css("background-color", "#f2f2f2"); $("tr:odd").css("background-...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值