JS代码实现：鼠标悬停与离开（两种方式）

第一种：普通方式

【demo07.html】

<html>
<head><link rel="stylesheet" href="css/demo05.css"><script type="text/javascript" src="js/demo07.js"></script>
</head>
<body><div id="div_container"><div id="div_fruit_list"><table id="tb1_fruit"><tr><th class="w20">名称</th><th class="w20">单价</th><th class="w20">数量</th><th class="w20">小计</th><th>操作</th></tr><tr onmouseover="showBGColor()" onmouseout="clearBGColor()"><td>苹果</td><td onmouseover="showHand()">5</td><td>20</td><td>100</td><td><img src="imgs/deleteIcon.jpg" class="deleteImg"/></td></tr><tr onmouseover="showBGColor()" onmouseout="clearBGColor()"><td>西瓜</td><td onmouseover="showHand()">3</td><td>20</td><td>60</td><td><img src="imgs/deleteIcon.jpg" class="deleteImg"/></td></tr><tr onmouseover="showBGColor()" onmouseout="clearBGColor()"><td>菠萝</td><td onmouseover="showHand()">4</td><td>25</td><td>100</td><td><img src="imgs/deleteIcon.jpg" class="deleteImg"/></td></tr><tr onmouseover="showBGColor()" onmouseout="clearBGColor()"><td>榴莲</td><td onmouseover="showHand()">3</td><td>30</td><td>90</td><td><img src="imgs/deleteIcon.jpg" class="deleteImg"/></td></tr><tr><td>总计</td><td colspan="4">999</td></tr></table></div></div>
</body>
</html>

【demo05.css】

body{margin:0;padding:0;background-color:#808080;
}
div{position:relative;float:left;
}
#div_container{width:80%;height:100%;border:0px solid blue;margin-left:10%;float:left;background-color:honeydew;/*设置边框轮廓为圆角*/border-radius:25px;
}
#div_fruit_list{width:100%;border:0px solid red;
}
#tbl_fruit{/*设置表格宽度：页面宽度的60%*/width:60%;/*设置每行单元格高度*/line-height:28px;/*设置表格和页面边框上方的距离*/margin-top:120px;/*设置表格和页面边框左边的距离*/margin-left:20%;
}
#tbl_fruit, #tbl_fruit tr,#tbl_fruit th,#tbl_fruit td{border:1px solid gray;/*单元格边界合并*/border-collapse:collapse;/*单元格文字居中*/text-align:center;/*设置单元格文字样式*/font-size:16px;font-family:"楷体";font-weight:lighter;color:threeddarkshadow;
}
.w20{width:20%;
}
.deleteImg{width:24px;height:24px;
}

【demo07.js】

//当鼠标悬浮时，显示背景颜色
function showBGColor(){//event:当前发生的事件//event.srcElement:事件源//alert(event.srcElement);//显示事件源的标签名：tr, td, th//alert(event.srcElement.tagName); //显示TDif(event && event.srcElement && event.srcElement.tagName == "TD") {//1、取选中的单元格var td = event.srcElement;//td.parentElement表示获取td的父元素 TR//2、取选中的单元格所在的单元行，并对此单元行进行操作var tr = td.parentElement;//如果想要通过js代码设置某节点的样式，则需要加上.style//3、设置了选中行的背景颜色tr.style.backgroundColor = "pink";//tr.cells表示获取这个tr中的所有的单元格var tds = tr.cells;//4、设置选中这行的单元格里的文字颜色for(var i = 0; i < tds.length; i++) {tds[i].style.color = "white";}}
}//当鼠标离开时，恢复原始样式
function clearBGColor(){if(event && event.srcElement && event.srcElement.tagName == "TD"){var td = event.srcElement;var tr = td.parentElement;tr.style.backgroundColor = "transparent";var tds = tr.cells;for(var i = 0; i < tds.length; i++) {tds[i].style.color = "threeddarkshadow";}}
}//当鼠标悬浮在单价单元格时，显示手势
function showHand(){if(event && event.srcElement && event.srcElement.tagName == "TD"){//取选中的单元格var td = event.srcElement;//设置选中的单元格，光标显示手的样式//cursor:光标td.style.cursor = "hand";}
}

第二种：优化方式（使用`window.onload`）

【demo08.html】

<html>
<head><link rel="stylesheet" href="css/demo05.css"><script type="text/javascript" src="js/demo08.js"></script>
</head>
<body><div id="div_container"><div id="div_fruit_list"><table id="tbl_fruit"><tr><th class="w20">名称</th><th class="w20">单价</th><th class="w20">数量</th><th class="w20">小计</th><th>操作</th></tr><tr><td>苹果</td><td>5</td><td>20</td><td>100</td><td><img src="imgs/deleteIcon.jpg" class="deleteImg"/></td></tr><tr><td>西瓜</td><td>3</td><td>20</td><td>60</td><td><img src="imgs/deleteIcon.jpg" class="deleteImg"/></td></tr><tr><td>菠萝</td><td>4</td><td>25</td><td>100</td><td><img src="imgs/deleteIcon.jpg" class="deleteImg"/></td></tr><tr><td>榴莲</td><td>3</td><td>30</td><td>90</td><td><img src="imgs/deleteIcon.jpg" class="deleteImg"/></td></tr><tr><td>总计</td><td colspan="4">999</td></tr></table></div></div>
</body>
</html>

【demo08.js】

window.onload=function(){//当页面加载完成，我们需要绑定各种事件//根据id获取到表格var fruitTbl = document.getElementById("tbl_fruit");//获取表格中所有行(tr)var rows = fruitTbl.rows;for(var i = 1; i < rows.length - 1; i++) {var tr = rows[i];//1.绑定鼠标悬浮及离开时设置背景颜色tr.onmouseover = showBGColor;//注意：没有();若有(),则代表当场调用这个方法，并且将这个方法的返回值返回给变量tr.onmouseout = clearBGColor;//获取tr这一行所有的单元格var cells = tr.cells;//获取单价单元格var priceTD = cells[1];//2.绑定鼠标悬浮在单价单元格变手势的事件priceTD.onmouseover = showHand;}
}//当鼠标悬浮时，显示背景颜色
function showBGColor(){//event:当前发生的事件//event.srcElement:事件源//alert(event.srcElement);//显示事件源的标签名：tr, td, th//alert(event.srcElement.tagName); //显示TDif(event && event.srcElement && event.srcElement.tagName == "TD") {//1、取选中的单元格var td = event.srcElement;//td.parentElement表示获取td的父元素 TR//2、取选中的单元格所在的单元行，并对此单元行进行操作var tr = td.parentElement;//如果想要通过js代码设置某节点的样式，则需要加上.style//3、设置了选中行的背景颜色tr.style.backgroundColor = "pink";//tr.cells表示获取这个tr中的所有的单元格var tds = tr.cells;//4、设置选中这行的单元格里的文字颜色for(var i = 0; i < tds.length; i++) {tds[i].style.color = "white";}}
}//当鼠标离开时，恢复原始样式
function clearBGColor(){if(event && event.srcElement && event.srcElement.tagName == "TD"){var td = event.srcElement;var tr = td.parentElement;tr.style.backgroundColor = "transparent";var tds = tr.cells;for(var i = 0; i < tds.length; i++) {tds[i].style.color = "threeddarkshadow";}}
}//当鼠标悬浮在单价单元格时，显示手势
function showHand(){if(event && event.srcElement && event.srcElement.tagName == "TD"){//取选中的单元格var td = event.srcElement;//设置选中的单元格，光标显示手的样式//cursor:光标td.style.cursor = "hand";}
}

JS代码实现：鼠标悬停与离开（两种方式）相关推荐

[js] axios为什么可以使用对象和函数两种方式调用？是如何实现的？
[js] axios为什么可以使用对象和函数两种方式调用?是如何实现的? axios 源码初始化看源码第一步,先看package.json.一般都会申明 main 主入口文件. // packag ...
利用jquery的qrcode.js插件生成二维码的两种方式的使用
2019独角兽企业重金招聘Python工程师标准>>> 利用jquery的qrcode.js插件生成二维码的额两种方式,canvas(即画布)方式和table方式(原文地址http: ...
将Eclipse代码导入到Android Studio的两种方式
转: http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2015/0104/2259.html 说到使用Android Studio,除了新建 ...
node.js 获取异步方法里面的数据 =》两种方式
第一种: 通过回调函数实现: var fs = require('fs); function getmime(callback){ fs.readFile('./t1.js', function(er ...
OpenLayers 6 代码绘制/draw交互组件绘制两种方式绘制椭圆过程详解
引言 OpenLayers可以通过代码绘制多种几何形状,也可以通过draw类型的交互组件绘制几何形状,官方实例提供了类如圆.折线.矩形.星形等方法.除此之外,椭圆这种图形其实也是非常常见的几何图形,但 ...
代码编译时光标闪烁的两种方式
两种反射的切换,按ins键.也就是把numberlock键关了后的0键.
使用ArcGIS JS API加载WMTS图层的两种方式
文章目录前言方式一方式二前言某些项目可能多方参与,每一方使用的GIS平台有时会有所不同,这时为了统一各方地图服务,通常会发布OGC标准的WMTS地图服务供各方使用.ArcGIS API fo ...
android line分享代码,Android 分享到Line的两种方式
写这篇文章主要目的是搜索到的答案都不是很完善,所以在此整理一下,防止有这需求的小伙伴们抓瞎 ;实现之前查了官方的文档,没有找到关于sdk支持分享的地方,只是提供了scheme支持(而且很难找..) 通 ...
Python创建进程、线程的两种方式
代码创建进程和线程的两种方式很多人学习python,不知道从何学起. 很多人学习python,掌握了基本语法过后,不知道在哪里寻找案例上手. 很多已经做案例的人,却不知道如何去学习更加高深的知识. ...
关于利用qrcode生成二维码的两种方式的区别
首先以下内容是查找网上资料后了解的利用qrcode.js生成二维码的额两种方式,canvas(即画布)方式和table方式(原文地址http://www.helloweba.com/view-blog ...

JS代码实现：鼠标悬停与离开（两种方式）

第一种：普通方式

第二种：优化方式（使用`window.onload`）

JS代码实现：鼠标悬停与离开（两种方式）相关推荐

最新文章

热门文章

JS代码实现：鼠标悬停与离开（两种方式）

第一种：普通方式

第二种：优化方式（使用window.onload）

JS代码实现：鼠标悬停与离开（两种方式）相关推荐

最新文章

热门文章

第二种：优化方式（使用`window.onload`）