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

2024-10-20 22:29:49

最近在学习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 鼠标移入移出表格内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

javascript表格隔行变色加鼠标移入移出及点击效果的方法

本文实例讲述了javascript表格隔行变色加鼠标移入移出及点击效果的方法.分享给大家供大家参考.具体分析如下: 表格隔行变色,也是一个提高用户体验的js效果. 效果实现: 表格奇偶行的颜色不一样.这样可以防止用户看数据时串行. 鼠标移入某行时变颜色,移出再变回来.这样可以让用户清楚的知道自己正在看哪一行. 表格点击变色.便于用户选中自己想保留的项. 说明: i%2 每个数和2取模的值,只有0和1两种,这样就可以实现隔行变色的效果 tables_li[i].onoff = 1; 为了实现
基于JS代码实现当鼠标悬停表格上显示这一格的全部内容

想实现这样一个功能,就是在一个表格中,由于很多字过多,所以用文字溢出的方法处理了,但是这样就无法看到表格中具体的内容呢.想实现当鼠标移上去的时候可以显示这一行被隐藏的内容.当然这个网上有很多插件,但是我没有用,还是自己写了一个. css部分 <style> #showbox { width: 150px; min-height: 50px; font: 100 14px/1 "微软雅黑"; border: 1px solid #3c8dbc; display: none;
JS实现鼠标点击展开或隐藏表格行的方法

本文实例讲述了JS实现鼠标点击展开或隐藏表格行的方法.分享给大家供大家参考.具体实现方法如下: 复制代码代码如下: <!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/xhtm
鼠标拖动动态改变表格的宽度的js脚本兼容ie/firefox

table拖动(兼容Firefox 3.5/IE6),固定表格宽度 table拖动(兼容Firefox 3.5/IE6),固定表格宽度 watch_dog){ o.p_p_p_sw(o.parentNode.cellIndex+1,watch_dog-o.p_p_c_gw(0)); return; } var t=a.clientX-lastX;out.innerHTML=t; if(t>0) {//right if(parseInt(o.parentNode.parentNode.cells[
JS实现的表格行鼠标点击高亮效果代码

本文实例讲述了JS实现的表格行鼠标点击高亮效果代码.分享给大家供大家参考,具体如下: 偶尔在看天天基金网净值公告时,从源代码里剥下的一段js代码,感觉比较实用,分享一下(仅IE有效) <script type="text/javascript"> var highlightcolor='#E0F2FE'; var clickcolor='#ffedd2'; function MouseOver(){ var source=event.srcElement; if (sour
js实现当鼠标移到表格上时显示这一格全部内容的代码

想实现这样一个功能,就是在一个表格中,由于很多字过多,所以用文字溢出的方法处理了,但是这样就无法看到表格中具体的内容呢.想实现当鼠标移上去的时候可以显示这一行被隐藏的内容.当然这个网上有很多插件,但是我没有用,还是自己写了一个. css部分 <style> #showbox { width: 150px; min-height: 50px; font: 100 14px/1 "微软雅黑"; border: 1px solid #3c8dbc; display: none;
一个简单但常用的javascript表格样式_鼠标划过行变色简洁实现

第一个太简单就不说了,第二个也很简单,但每个人都有不同的实现方法,下面给一个比较简洁的做法,支持IE6.IE7.FF2,其他浏览器未测试(可以扩展一下用到ASP.NET的GridView里): 鼠标划过表格行变色-简洁实现 #tb{width:666px;border-collapse:collapse;border:1px solid #EEE;font-size:14px;} #tb th{background:#EEE;border-bottom:1px solid #CCC;paddin
js实现鼠标经过表格行变色的方法

本文实例讲述了js实现鼠标经过表格行变色的方法.分享给大家供大家参考.具体实现方法如下: <script type=text/javascript> <!-- (function(){ var rows = document.getElementById("listdata"); var add = function(){ this.style.backgroundColor="#f3f3f1"; }; var del = function(){
Javaweb 鼠标移入移出表格颜色变化的实现

最近在学习JavaWeb时,有用到鼠标移动事件,所以今天在这里记录一个相关的案例,同时也是对相关知识的一个巩固,效果为在鼠标移动到表格对应行列时,该行列的背景颜色发生变化. 效果如下: 其中用到是onmouseover和onmouseou事件t,同时还有一个作用相似的事件叫做onmousemove,所以在这里先对这三种鼠标事件做一个简单的对比: 在时间上:如果两个事件同时存在,先是onmousemove事件触发后,才会触发onmouseover事件. 在按钮上:onmousemove和onmou
jQuery实现鼠标移入移出事件切换功能示例

本文实例讲述了jQuery实现鼠标移入移出事件切换功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <script src="http://libs.baidu.com/jquery/1.8.0/jquery.min.js"></script> <style> #msg { color
鼠标移入移出改变CSS样式的小例子

网页上的某个区域,当鼠标移入时改变样式,鼠标移出时自动恢复样式,可以是一个图片的边框,也可以一段文字变色,掌握了原理,貌似可以做更加丰富生动的网页互动效果,这里主要是利用Js控制Hover标签所在的DIV产生动作,也是学习的好范例. 鼠标移入移出改变CSS样式 body{color:#fff;font:12px/1.5 Tahoma;} #div1{width:150px;height:150px;margin:0 auto;padding:10px;background:black;borde
鼠标移入移出事件改变图片的分辨率的两种方法

最近在做一个鼠标移入移出图片事件,有几种方法大家可以试一下首先是改变分辨率的两种方法,鼠标移入图片和移出图片的分辨率不同方法一复制代码代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title
vue实现鼠标移入移出事件代码实例

本文实例为大家分享了vue实现鼠标移入移出事件的具体代码,供大家参考,具体内容如下 <div class="index_tableTitle clearfix" v-for="(item,index) in table_tit"> <div class="indexItem"> <span :title="item.name">{{item.name}}</span> <s
js判断鼠标移入移出方向的方法

PC端鼠标移入移出的效果很好,这里就给出判断鼠标移入移出的方法,有空再发出带效果的文章,不过授之以鱼不如受之以渔,有了个这个方法,效果不还是so easy吗? 代码: <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-wi
JavaScript实现鼠标移入随机变换颜色

大家好! 今天分享一个在 JavaScript中,实现一个鼠标移入可以随机变换颜色. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> /* 这里定义一下div(块元素)已下span 标签的宽.高.边框线以及边框线的颜色*/ span{ display: block; width: 80px; hei
js实现鼠标移入移出卡片切换内容

本文实例为大家分享了js实现鼠标移入移出卡片切换内容的具体代码,供大家参考,具体内容如下案例动态效果图: html代码: <div class="sports-purple"> <div class="all">  <div class="content"> <div class="first-block"> <!-- 内容的侧边栏 --
vue 鼠标移入移出(hover)切换显示图片问题

目录鼠标移入移出(hover)切换显示图片 css实现 js实现 vue鼠标移入移出事件注意事项发生冒泡事件一.解决方法二.定义三.两对鼠标事件的区别鼠标移入移出(hover)切换显示图片 css实现代码: <div @click="exitConnect()" class="exit_hover"> <img class="exit1 mr10" :src="exit" styl

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

相关推荐

随机推荐