Javaweb 鼠标移入移出表格颜色变化的实现-6ren

Javaweb 鼠标移入移出表格颜色变化的实现

转载作者：qq735679552 更新时间：2022-09-27 22:32:09

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章Javaweb 鼠标移入移出表格颜色变化的实现由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

最近在学习JavaWeb时，有用到鼠标移动事件，所以今天在这里记录一个相关的案例，同时也是对相关知识的一个巩固，效果为在鼠标移动到表格对应行列时，该行列的背景颜色发生变化.

效果如下:

Javaweb 鼠标移入移出表格颜色变化的实现

其中用到是onmouseover和onmouseou事件t，同时还有一个作用相似的事件叫做onmousemove，所以在这里先对这三种鼠标事件做一个简单的对比:

在时间上：如果两个事件同时存在，先是onmousemove事件触发后，才会触发onmouseover事件。
在按钮上：onmousemove和onmouseover都不区分鼠标按钮
在动作上：onmouseover是在鼠标刚移入区域的时候触发，onmousemove是除了鼠标移入区域时触发外，鼠标在区域内移动同样也会触发事件。
两者区别：当鼠标移过当前对象区域时就产生了onmouseover事件，所以onmouseover事件有个移入移出的过程,当鼠标在当前对象区域上移动时就产生了onmousemove事件，只要是在对象上移动而且没有移出对象的，那么就是onmousemove事件。

onmouseout事件则是在鼠标移出对象区域时触发.

搞懂这三者之间的关系，在进行鼠标经过事件的处理时只需使用对应的事件触发即可:

接下来是对上述事件和效果的代码:

Jsp部分代码:

 
    ? 
   
         <%@ page language= 
         "java" 
         import 
         = 
         "java.util.*" 
         pageEncoding= 
         "utf-8" 
         %> 
        
         <% 
        
         String path = request.getContextPath(); 
        
         String basePath = request.getScheme()+ 
         "://" 
         +request.getServerName()+ 
         ":" 
         +request.getServerPort()+path+ 
         "/" 
         ; 
        
         %> 
        
         <!DOCTYPE HTML PUBLIC  
         "-//W3C//DTD HTML 4.01 Transitional//EN" 
         > 
        
         <html> 
        
         <head> 
        
         <base href= 
         "<%=basePath%>" 
         rel= 
         "external nofollow" 
         > 
        
         <title>表格颜色变化</title> 
        
         <meta http-equiv= 
         "pragma" 
         content= 
         "no-cache" 
         > 
        
         <meta http-equiv= 
         "cache-control" 
         content= 
         "no-cache" 
         > 
        
         <meta http-equiv= 
         "expires" 
         content= 
         "0" 
         >   
        
         <meta http-equiv= 
         "keywords" 
         content= 
         "keyword1,keyword2,keyword3" 
         > 
        
         <meta http-equiv= 
         "description" 
         content= 
         "This is my page" 
         > 
        
         <!-- 
        
         <link rel= 
         "stylesheet" 
         type= 
         "text/css" 
         href= 
         "styles.css" 
         rel= 
         "external nofollow" 
         > 
        
         --> 
        
         <script type= 
         "text/javascript" 
         src= 
         "index.js" 
         ></script> 
        
         </head> 
        
         <body> 
        
         <table width =  
         "200" 
         border =  
         "1" 
         align =  
         "center" 
         cellpadding= 
         "1" 
         cellspacing= 
         "5" 
         > 
        
         <tr id =  
         "t0" 
         ><th>学校</th><th>专业</th><th>人数</th></tr> 
        
         <tr id =  
         "t1" 
         ><th>济大</th><th>软件</th><th> 
         2000 
         </th></tr> 
        
         <tr id =  
         "t2" 
         ><th>北大</th><th>机械</th><th> 
         3000 
         </th></tr> 
        
         <tr id =  
         "t3" 
         ><th>浙大</th><th>生物</th><th> 
         4000 
         </th></tr> 
        
         </table> 
        
         </body> 
        
         </html>

Js部分代码:

 
    ? 
   
         onload =  
         function 
         () { 
        
         var 
         t0 = document.getElementById( 
         "t0" 
         ); 
        
         var 
         t1 = document.getElementById( 
         "t1" 
         ); 
        
         var 
         t2 = document.getElementById( 
         "t2" 
         ); 
        
         var 
         t3 = document.getElementById( 
         "t3" 
         ); 
        
         t0.onmouseover =  
         function 
         () { 
        
         t0.style.backgroundColor =  
         "green" 
         ; 
        
         } 
        
         t0.onmouseout =  
         function 
         () { 
        
         t0.style.backgroundColor =  
         "white" 
         ; 
        
         } 
        
         t1.onmouseover =  
         function 
         () { 
        
         t1.style.backgroundColor =  
         "red" 
         ; 
        
         } 
        
         t1.onmouseout =  
         function 
         () { 
        
         t1.style.backgroundColor =  
         "white" 
         ; 
        
         } 
        
         t2.onmouseover =  
         function 
         () { 
        
         t2.style.backgroundColor =  
         "red" 
         ; 
        
         } 
        
         t2.onmouseout =  
         function 
         () { 
        
         t2.style.backgroundColor =  
         "white" 
         ; 
        
         } 
        
         t3.onmouseover =  
         function 
         () { 
        
         t3.style.backgroundColor =  
         "red" 
         ; 
        
         } 
        
         t3.onmouseout =  
         function 
         () { 
        
         t3.style.backgroundColor =  
         "white" 
         ; 
        
         } 
        
         }

到此这篇关于Javaweb 鼠标移入移出表格颜色变化的实现的文章就介绍到这了,更多相关Javaweb 鼠标移入移出表格内容请搜索我以前的文章或继续浏览下面的相关文章希望大家以后多多支持我！。

原文链接：https://blog.csdn.net/weixin_44985880/article/details/108401258 。

最后此篇关于Javaweb 鼠标移入移出表格颜色变化的实现的文章就讲到这里了,如果你想了解更多关于Javaweb 鼠标移入移出表格颜色变化的实现的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！。

文章推荐：据说这个是可以撸到2089年的idea2020.2(推荐)

文章推荐： Java 实现图片压缩的两种方法

文章推荐： JAVA 实现磁盘文件加解密操作的示例代码

文章推荐： IntelliJ Plugin 开发之添加第三方jar的示例代码

c++ - 移入 .txt
我目前正在开发一款炸弹人游戏 :D。老实说，它进行得非常好。我现在正在创建我的 map 编辑器，但我想知道是否可以使用输出流在 .txt 文件中移动？我已经学会了如何使用缓冲区(字符串)读取 whil
c++ - QObjects 移入 QThreads 后信号不再工作
基本上，标题...如果没有 QThread(或者它只是被评论)我得到以下结果: LOG> Log working! LOG> PRODUCER: sent resource address: 2998
view - Jenkins - 将 View 移入 View
我有 3 个 View ，并希望将它们集成到一个 View 中，以便它们成为这一 View 中的子文件夹。我怎样才能做到这一点？还是我必须制作一个 View ，然后再次手动添加和配置这些 View
c - 移入 2 个 32 位寄存器
void rotate( unsigned long mask[], int rotateCnt ); 此函数将当前 64 位掩码 (mask[]) 旋转 rotateCnt 位。如果rotateCn
android - 能否将 Davlik 移入 linux 内核以提高性能？
这是一个非常高级的架构问题。为什么还没有将 JVM 移入linux 内核，它可以更高效(包括即时编译代码)。我知道这对最小内核的粉丝来说是可恶的，但 Linux 不是那些操作系统之一，它似乎。可以通
xcode - 将以前的文档集和 ios SDK 移入 XCode 4.5
我的 Internet 连接速度很慢，我试图避免下载以前的 XCode 文档集和 SDK。我刚刚安装了 XCode 4.5，发现它们没有包含任何 iOS 版本的文档集。也只有适用于 iOS 6 的
javascript - 将 View 外的 div 移入 View 中
当单击另一个 div 时，如何将一个 div(应该在最右侧的 View 之外)移动到页面上？在下面的代码笔中，我希望绿色 div (id = "three") 离开页面，当单击红色 div (id =
c++ - 将 unique_ptr 移入 lambda 时，为什么不能调用 reset？
当将 std::unique_ptr 移动到 lambda 中时，无法在其上调用 reset()，因为它似乎是 const : error C2662: void std::unique_ptr>::
mysql - 移入 docker 容器 `docker-entrypoint-initdb.d` 的 sql 转储是否已加密？
我正在将数据库转储到 SQL 转储中: docker exec mysql sh -c 'exec mysqldump --all-databases -uroot -ppassword' > all

qq735679552

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

Javaweb 鼠标移入移出表格颜色变化的实现