用JQuery实现表格渐变色的效果

最新推荐文章于 2023-07-24 14:38:18 发布
最新推荐文章于 2023-07-24 14:38:18 发布
阅读量931 收藏
点赞数
文章标签： jquery function border 文档
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mengmeng305/article/details/6523486
版权
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <style>  
  5. .one{  
  6. background-color:#FFFFCC;  
  7. }  
  8. .two{  
  9. background-color: #66CC66;}  
  10. .over{  
  11. background-color:#FF00FF;}  
  12. </style>  
  13. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
  14. <script language="javascript" type="text/javascript" src="../include/jquery-1.5.1.min.js"></script>  
  15. <script language="javascript" type="text/javascript">  
  16.    $(document).ready(function(){  
  17.      
  18.      $("#tab tr:even").addClass("one");  
  19.      $("#tab tr:odd").addClass("two");  
  20.      
  21.      $("#tab tr").mouseover(function(){  
  22.          
  23.          $(this).addClass("over");  
  24.        
  25.      });  
  26.        
  27.      $("#tab tr").mouseout(function(){  
  28.          
  29.          $(this).removeClass("over");  
  30.        
  31.      });  
  32.      
  33.    });  
  34. </script>  
  35. <title>无标题文档</title>  
  36. </head>  
  37.   
  38. <body>  
  39. <table id="tab" width="503" height="108" border="1" cellpadding="0" cellspacing="0">  
  40.       <caption>jQuery 实现表格的隔行变色</caption>  
  41.   <tr>  
  42.     <th>ID</th>  
  43.     <th>姓名</th>  
  44.     <th>性别</th>  
  45.     <th>年龄</th>  
  46.     <th>专业</th>  
  47.   </tr>  
  48.   <tr>  
  49.     <td> </td>  
  50.     <td> </td>  
  51.     <td> </td>  
  52.     <td> </td>  
  53.     <td> </td>  
  54.   </tr>  
  55.   <tr>  
  56.     <td> </td>  
  57.     <td> </td>  
  58.     <td> </td>  
  59.     <td> </td>  
  60.     <td> </td>  
  61.   </tr>  
  62.   <tr>  
  63.     <td> </td>  
  64.     <td> </td>  
  65.     <td> </td>  
  66.     <td> </td>  
  67.     <td> </td>  
  68.   </tr>  
  69.   <tr>  
  70.     <td> </td>  
  71.     <td> </td>  
  72.     <td> </td>  
  73.     <td> </td>  
  74.     <td> </td>  
  75.   </tr>  
  76.   <tr>  
  77.     <td> </td>  
  78.     <td> </td>  
  79.     <td> </td>  
  80.     <td> </td>  
  81.     <td> </td>  
  82.   </tr>  
  83.   <tr>  
  84.     <td> </td>  
  85.     <td> </td>  
  86.     <td> </td>  
  87.     <td> </td>  
  88.     <td> </td>  
  89.   </tr>  
  90.   <tr>  
  91.     <td> </td>  
  92.     <td> </td>  
  93.     <td> </td>  
  94.     <td> </td>  
  95.     <td> </td>  
  96.   </tr>  
  97.   <tr>  
  98.     <td> </td>  
  99.     <td> </td>  
  100.     <td> </td>  
  101.     <td> </td>  
  102.     <td> </td>  
  103.   </tr>  
  104. </table>  
  105. </body>  
  106. </html>  
mengmeng305
关注
js+jquery实现标签背景渐变颜色，支持大部分浏览器
pow8368684的专栏
12-28 3167
说明：需要先加载jquery库 $(function() { // refreshGradient("#main_operation","#3073e5","#2d9ae6",3);//div背景颜色渐变 }); /********************************* * 设置标签背景渐变 * @param divId 标签 、 id 、className * @pa
js案例——取模给表格行添加渐变背景色
qq_43151638的博客
10-18 285
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <table border="1" cellspacing="0" cellpadding="0" style="width...
Jquery 表格颜色渐变
08-28
Jquery 表格颜色渐变，隔行变色。鼠标移过变色，鼠标点击变色
jQuery中的渐变动画效果
weixin_34075551的博客
08-17 51
jQuery中的渐变动画效果jQuery中的渐变动画效果 转载于:https://www.cnblogs.com/DreamDrive/p/5780292.html
用jQuery让表格偶数行样式渐变，鼠标移上去样式变化
weixin_33904756的博客
12-01 117
Jquery代码： 1 $("table tr:nth-child(even)").addClass("striped");2 3 $("tr").mouseover(function() {4 $(this).addClass("over");5 }).mouseout(function() {6 $(this).removeClass("over");7 }) 这里有一个JQuer...
CSS实现元素颜色渐变
jiaonizuoren的博客
11-21 674
在开发前端页面是，有时候会有颜色渐变的需求，以div元素为例，html代码实现如下： &lt;div style="width:500px;height:50px;background: linear-gradient(to right, #082094, #6cb1ff);"&gt;&lt;/div&gt;  效果如下： to right第一个颜色向第二个颜色代表渐变的方向，若改为t...
jQuery实现字体颜色渐变效果的方法
10-20
在讨论jQuery实现字体颜色渐变效果的方法之前，需要了解的是，jQuery本身并不直接支持CSS属性值为非数字的颜色或字体权重等属性的动画处理。例如，尝试使用jQuery的.animate()方法直接改变元素的颜色或字体权重（如...
表格颜色渐变效果特效代码
03-20
"表格颜色渐变效果特效代码"是一个关于如何使用编程语言为表格添加动态颜色渐变效果的主题。这种效果可以提升表格的视觉吸引力，使数据更容易理解，同时也能增加用户交互体验。 颜色渐变通常涉及到CSS（层叠样式表...
jQuery打开表格内容随机渐变显示.zip
07-05
"jQuery打开表格内容随机渐变显示"是利用jQuery实现的一个功能，旨在提升用户界面的动态效果和交互体验。这个插件特别适用于那些希望在网页中展示数据的表格，并且希望通过渐变显示的方式增加视觉吸引力。 该插件的...
jquery实现表单变色
09-28
《锋利的jquery》利用siblings（）,attr（）方法实现表单变色
HTML渐变色
qq_43201652的博客
08-17 1976
html渐变色
一个模仿图片透明渐变做的表格颜色渐变效果 js脚本特效
weixin_30725315的博客
01-06 69
<HTML> <HEAD> <TITLE>dancepower.cn</TITLE> <SCRIPT language=JavaScript> // Flash table Extension for Dreamwever ,by dio(diopex@sina.com) nereidFadeObjects = new Obj...
el-table 表头设置渐变色
最新发布
ren648154292的博客
07-24 1303
【代码】el-table 表头设置渐变色。
修改element框架的el-table表头颜色为渐变色
一只想躺平却不敢躺平的小菜鸟
05-29 2358
修改element框架的el-table表头颜色为渐变色
我的前端学习笔记03-Layout
weixin_44698814的博客
02-27 390
文档流（normal flow） 网页是一个多层的结构，一层摞着一层 通过CSS可以分别为每一层来设置样式 作为用户来讲只能看到最顶上一层 这些层中，最底下的一层称为文档流，文档流是网页的基础 我们所创建的元素默认都是在文档流中进行排列 对于我们来元素主要有两个状态 在文档流中 不在文档流中（脱离文档流） 元素在文档流中有什么特点： 块元素 块元素会在页面中独占一行...
jQuery 颜色渐变动画效果
fuerbosi
07-17 736
其实很简单，只要在javascript中写入: $(document).ready(function(){ $('#disclaimer').animate({'backgroundColor':'#ff9f5f'}, 2000); }); 即可，但是它需要下载一个js插件，如下所示：/* * jQuery Color Animations * Copyright 2007 John...
简单table单元设置，颜色渐变，元素获取
yuhui666666的博客
04-17 2455
//jquery与js结合，$里面可以是对象，也可以是标签，id var input = cells[j].getElementsByTagName("input"); $(input[0]).attr("style", "background-color:#fff;"); ==========================================================
CSS实现表格背景色渐变色
ecren的专栏
04-16 4023
.xr td { font-family: "Tahoma"; font-size: 12px; font-weight: bold; text-align: center; Filter: Alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=0, StartY=0, FinishX=0, FinishY=100);}table { font-f
jQuery实现表格选中行变色
java_zhaoyanli的专栏
12-02 3475
jQuery实现表格选中行变色 .s1 { background-color: yellow; } $(function() { $("tbody tr").click(function() { $(this).addClass("s1").siblings().removeClass("s1"); $(this).find(":radio").attr("check
使用jQuery实现表格本地排序
这里，我们创建一个jQuery插件`alternateRowColors`用于实现表格行的交替颜色效果，以及一个处理表格排序的函数： ```javascript jQuery.fn.alternateRowColors = function() { $('tbody tr:odd', this)....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值