Jquery 双色表格，鼠标经过变色

最新推荐文章于 2024-08-03 17:05:14 发布
最新推荐文章于 2024-08-03 17:05:14 发布
阅读量968 收藏
点赞数
文章标签： jquery javascript function xhtml library border
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dududu01/article/details/6643389
版权
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script language="javascript" type="text/javascript" src="jQuery JavaScript Library v1.6.2.js"></script>
<script>

$(document).ready(function(){  //用来作为DOM快速载入JAVASCRIPT的小函数，ready()

$(".stripe tr").mouseover(function(){$(this).addClass("over");})       //当鼠标移到类为stripe的tr 上时，添加样式over

                      .mouseout(function(){$(this).removeClass("over");})   


$(".stripe tr:even").addClass("alt");  //  //当鼠标移到类为stripe偶数的tr 上时，添加样式alt

});

</script>

<style>

th{
background:#0066ff;
color:#ffffff;
line-height:20px;
height:30px;
}

td{
padding:6px 11px;
border-bottom:1px solid #95bce2;
vertical-align:top;
text-align:center;
}

td *{
padding:6px 11px;
}

tr.alt td{
background:#00ff00;
}


tr.over td{
background:#ff0000;
}

</style>
</head>

<body>


<table class="stripe" width="50%" border="0"cellspacing="0" cellpadding="0">
<thead>
<th>姓名</th>
<th>年龄</th>
<th>短线</th>
<th>邮箱</th>

</thead>

<tbody>
<tr>

<td>dengguoliang</td>
<td>23</td>
<td>464646</td>
<td>gl.deng@amial.com</td>
</tr>

<tr>

<td>dengguoliang</td>
<td>23</td>
<td>464646</td>
<td>gl.deng@amial.com</td>
</tr>

<tr>

<td>dengguoliang</td>
<td>23</td>
<td>464646</td>
<td>gl.deng@amial.com</td>
</tr>

<tr>

<td>dengguoliang</td>
<td>23</td>
<td>464646</td>
<td>gl.deng@amial.com</td>
</tr>

<tr>

<td>dengguoliang</td>
<td>23</td>
<td>464646</td>
<td>gl.deng@amial.com</td>
</tr>

<tr>

<td>dengguoliang</td>
<td>23</td>
<td>464646</td>
<td>gl.deng@amial.com</td>
</tr>

<tr>

<td>dengguoliang</td>
<td>23</td>
<td>464646</td>
<td>gl.deng@amial.com</td>
</tr>


</tbody>

<table>


</body>
</html>
零度空间0520
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery实现鼠标滑过行变颜色的表格
weixin_46528860的博客
10-12 1365
jQuery 第一章 jQuery入门 作业1： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <link rel="stylesheet" href="css/index.css" /> <title></title> </head> <body> <table> <tr st..
jquery实现table鼠标经过变色代码
10-26
通过以上步骤，我们实现了当鼠标经过表格行时，背景色变为预设颜色（如 `#ffc4c6`），鼠标移开后恢复原背景色的效果。这种简单但有效的交互设计能显著提高用户的操作体验，使得数据更易于阅读和理解。在实际开发中，...
用jquery实现双色表格，鼠标移动到上面时，行变色~！
weixin_33895695的博客
12-31 139
这里我直接贴上代码，在代码上稍作解释： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/19...
Jquery 表格分行变色
微尘的世界
08-19 152
http://bbs.blueidea.com/thread-2853109-1-1.html   jQuery新手教程，高手勿笑。————————————————————为了能够更清晰的显示表格中的数据，使用双色表格来显示数据的例子已经屡见不鲜了。我们通常都是使用JavaScript来实现这种效果，可是你知道jQuery中该如何做吗？用jQuery的语句重复JavaScript实现方法吗？不...
双色表格（含页面内容查找功能）（JavaScript）
weixin_48112113的博客
08-02 1205
1. 任务要求 1）简单过滤器的使用； 2）内容过滤器的使用； 3）如何获取指定元素的值？ 4）如何设置元素的样式？ 2. 需求说明 制作显示如下图所示的页面，要求如下。 （1）当页面加载完毕时，隔行变色，颜色值如上图所示，其中标题行字体颜色为白色，首行背景颜色值为：#00a40c，偶数行颜色值为#a5e5aa。 （2）当鼠标指向某一行时，该行颜色随之改变，当离开那行时，该行颜色恢复原样。 （3）输入相应的查找内容，点击...
jQuery，我很看好你哦
weixin_34174322的博客
11-16 65
想当年，Ajax席卷Web开发界的时候，Javascript技术就再一次被聚焦，上一次聚焦恐怕要追溯到它出生那一天了。没有JavaScript经验的年轻人或者初学者，多数被这门轻量级语言搞晕。现在jQuery出现了，第一次听说它是从一个年轻人朋友那里得知的。据说在JavaScript基础上再上一层楼，不仅功能强大了，也降低了学习的门槛，让我联想到从汇编...
DWRUtil.addRows
˙_Torres
01-04 397
function handle(array){  var cellFunctions = [                 function(array) { return ""+array.id; },                 function(array) { return array.datetime.toLocaleDateString(); },                 function(array) { return array.productName; },         
“Python小屋”1300篇历史文章分类速查表
董付国的Python专栏
09-02 5023
总体说明：各分类中的文章是按发布时间逆序排列的，动态更新。公众号所有代码均可作为教学案例，转载请注明出处，请勿用作商业用途。快速查找历史文章的方法：1）单击本文右上角的按钮“...”，然后在弹出的窗口中选择“搜索页面内容”，然后输入要找的关键字即可。董付国老师系列教材（转发本公众号文章超过60条（每天不超过10条）到朋友圈，然后可以后台发送消息获赠任意一本书。）：《Python程序设计（第3版）》...
总结了一些很实用值得收藏的站点
热门推荐
wzg0817的博客
07-19 1万+
目录 VR相关 个人站点 人工智能 优秀网站 创意十足 图标库 在线工具 在线简历 官方网站 数据分析工具 炫酷特效 社区 素材下载 视频学习 配色方案 静态资源库 音效素材库 Hove特效 Wordpress 值得收藏 电子书 网站导航 资源下载 边学边玩 VR相关 站点名称 描述 标签 VR网站仓库 汇集了国外涉及到VR的大部分知名网站 VR、网站导航 个人站点 站点名称 描述 标签 10081677wc 字节跳动公司某前端员工的博客 博客、字节跳动、前端 .
“Python小屋”免费资源汇总（截至2018年11月28日）
董付国的Python专栏
11-29 1571
为方便广大Python爱好者查阅和学习，特整理汇总微信公众号“Python小屋”开通29个月以来推送过的700多篇文章清单，如果需要本清单的电子版，可以在公众号后台发送消息“资源汇总”获取...
jquery导航制件jquery鼠标经过变色效果示例
10-26
### jQuery 鼠标经过变色效果实现 #### 背景介绍 在网页设计中，导航栏是非常重要的组成部分之一，它不仅能够帮助用户快速找到所需的信息，还能够提升网站的整体美观度。为了使导航栏更加吸引人，设计师们常常会...
jquery 双色表格实现代码
10-29
上次用javascript实现了上色表格,见。但通过jQuery强大的选择器可更加简洁，优雅的实现。
jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码
10-22
在这个例子中，我们将深入探讨如何使用jQuery创建一个插件，以实现表格隔行变色以及鼠标滑过时的高亮显示效果。 首先，我们来看一下基本的HTML结构，这里包含了一个简单的表格，用于展示插件的效果： ```html ...
Function Call & ReACT，Agent应用落地的加速器--function calling和react有什么不同
Dove_1234的博客
08-03 668
探索智能体Agent的未来之路：Function Call与ReACT框架的较量，谁能引领未来？
SpringBoot+Vue图书(图书借阅)管理系统-附项目源码与配套文档
最新发布
m0_74283290的博客
08-03 625
本论文阐述了一套先进的图书管理系统的设计与实现，该系统采用Java语言，结合现代Web开发框架和技术，旨在为图书馆提供高效、灵活且用户友好的资源管理解决方案。系统利用Spring Boot框架为核心，整合MyBatis ORM工具，以及MySQL数据库，构建了一个高性能、可扩展的后端服务。前端界面则采用了Vue.js框架，以提供流畅的用户交互体验。论文首先进行了详尽的需求分析，确定了系统的核心功能，包括图书的添加、编辑、删除、查询，读者的注册、登录、个人信息管理，以及图书的借阅、归还、续借流程。
Vue3中的pinia的使用及组合写法与普通写法的区别
m0_62626838的博客
07-30 236
1、首先pinia可以自己后面按需安装，也可在项目创建时去勾选安装（这里我使用的是项目创建时自动安装的，吃了点亏，忘记这里是组合写法了）按照这个写法是不需要添加pinia核心（state、actions、getters），但需要return！store文件夹中的counter.ts （名字任起）在组件中直接使用即可，如下图。2、自定义安装pinia。3、在组件中使用，如下图。
VUE3自定义指令防止重复点击多次提交
MadSnail00的博客
07-30 302
vue3连续点击按钮重复提交，vue3自定义指令防止重复提交
【分享】前端程序员-技术网站推荐
一位前行者的博客
07-30 913
对于前端开发人员来说，以下是一些推荐的技术网站，这些网站提供了丰富的资源和知识，可以帮助你提升前端开发技能：收集一些 、、 的网站 vite 官方中文文档 element-plus 官方中文文档 pinia 官方中文文档 vue-router 官方中文文档 Tailwind CSS 官方文档 vitest 官方中文文档 es6 中文文档 axios 官方中文文档 vxetable 官方中文文档 lodash 中文文档 echarts 官方中文文档 animat
jquery实现鼠标移动变色
12-29
以下是使用jQuery实现鼠标移动变色的示例代码： ```javascript $(document).ready(function(){ $("body").mousemove(function(event){ var x = event.pageX; var y = event.pageY; var color = "rgb(" + x%255 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值