纯JS代码实现隔行变色鼠标移入高亮


Posted in Javascript onNovember 23, 2016

在前端开发中经常见到隔行变色鼠标移入高亮显示的效果,下面小编给大家分享基于js代码实现的隔行变色鼠标移入高亮效果,废话不多说了,具体代码如下所示:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#table {
width: 400px;
border-collapse: collapse;
}
</style>
</head>
<body>
<table id="table" border="1">
<thead>
<td>ID</td>
<td>姓名</td>
<td>年龄</td>
</thead>
<tbody>
<tr>
<td>1</td>
<td>黄艺</td>
<td>20</td>
</tr>
<tr>
<td>2</td>
<td>张三</td>
<td>21</td>
</tr>
<tr>
<td>3</td>
<td>李四</td>
<td>22</td>
</tr>
<tr>
<td>4</td>
<td>网无</td>
<td>23</td>
</tr>
</tbody>
</table>
</body>
<script type="text/javascript">
// 实现隔行变色,鼠标移入高亮
var table = document.getElementById("table");
var oldColor = "";//声明一个变量,保存表格原来的颜色
for(var i = 0; i < table.tBodies[0].rows.length; i++) {
//使用判断实现隔行变色
if(i % 2 == 0) {
table.tBodies[0].rows[i].style.backgroundColor = "gray";
} else {
table.tBodies[0].rows[i].style.backgroundColor = "#ccc";
}
//实现鼠标移入高亮
table.tBodies[0].rows[i].onmouseover = function() {
oldColor = this.style.backgroundColor;
this.style.backgroundColor = "red";
}
//实现鼠标移出变回原来的颜色
table.tBodies[0].rows[i].onmouseout = function() {
this.style.backgroundColor = oldColor;
}
}
</script>
</html>

以上所述是小编给大家介绍的纯JS代码实现隔行变色鼠标移入高亮,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jquery下实现overlay遮罩层代码
Aug 25 Javascript
js面向对象设计用{}好还是function(){}好(构造函数)
Oct 23 Javascript
从零学JS之你需要了解的几本书
May 19 Javascript
原创jQuery弹出层插件分享
Apr 02 Javascript
jQuery实现的仿select功能代码
Aug 19 Javascript
js实现图片无缝滚动
Dec 23 Javascript
JS获取年月日时分秒的方法分析
Nov 28 Javascript
BootstrapValidator超详细教程(推荐)
Dec 07 Javascript
angularjs实现的前端分页控件示例
Feb 10 Javascript
vue cli 3.x 项目部署到 github pages的方法
Apr 17 Javascript
微信小程序如何获取群聊的openGid以及名称详解
Jul 17 Javascript
浅析Angular 实现一个repeat指令的方法
Jul 21 Javascript
jQuery实现ToolTip元素定位显示功能示例
Nov 23 #Javascript
详解jQuery的Cookie插件
Nov 23 #Javascript
JS 实现可停顿的垂直滚动实例代码
Nov 23 #Javascript
Dropzone.js实现文件拖拽上传功能(附源码下载)
Nov 22 #Javascript
解析jQueryEasyUI的使用
Nov 22 #Javascript
详解jQuery插件开发方式
Nov 22 #Javascript
AngularJS中isolate scope的用法分析
Nov 22 #Javascript
You might like
Zend Studio (eclipse)使用速度优化方法
2011/03/23 PHP
自定义php类(查找/修改)xml文档
2013/03/26 PHP
php递归函数三种实现方法及如何实现数字累加
2015/08/07 PHP
php开发微信支付获取用户地址
2015/10/04 PHP
php获取当前页面完整URL地址
2015/12/30 PHP
js将控件隐藏的方法及display属性介绍
2013/07/04 Javascript
jquery选择器之层级过滤选择器详解
2014/01/27 Javascript
Javascript写入txt和读取txt文件示例
2014/02/12 Javascript
在css加载完毕后自动判断页面是否加入css或js文件
2014/09/10 Javascript
JS操作HTML自定义属性的方法
2015/02/10 Javascript
浅谈bootstrap源码分析之scrollspy(滚动侦听)
2016/06/06 Javascript
利用JS实现页面删除并重新排序功能
2016/12/09 Javascript
vue2.0移除或更改的一些东西(移除index key)
2017/08/28 Javascript
原生JS实现 MUI导航栏透明渐变效果
2017/11/07 Javascript
解读ES6中class关键字
2017/11/20 Javascript
vue 之 .sync 修饰符示例详解
2018/04/21 Javascript
vue组件实现弹出框点击显示隐藏效果
2020/10/26 Javascript
详解微信小程序与内嵌网页交互实现支付功能
2018/10/22 Javascript
vue项目打包后请求地址错误/打包后跨域操作
2020/11/04 Javascript
[08:44]和酒神一起战斗 DOTA2教你做大人
2014/03/27 DOTA
[01:03:36]Ti4 循环赛第三日DK vs Titan
2014/07/12 DOTA
[02:39]我与DAC之Newbee.Moogy:从论坛到TI
2018/03/26 DOTA
使用python实现递归版汉诺塔示例(汉诺塔递归算法)
2014/04/08 Python
Python模拟登陆实现代码
2017/06/14 Python
java中两个byte数组实现合并的示例
2018/05/09 Python
Python开发之Nginx+uWSGI+virtualenv多项目部署教程
2019/05/13 Python
python logging模块的使用详解
2020/10/23 Python
python 利用openpyxl读取Excel表格中指定的行或列教程
2021/02/06 Python
Harrods英国:世界领先的奢侈品百货商店
2020/09/23 全球购物
十岁生日父母答谢词
2014/01/18 职场文书
教师申诉制度
2014/01/29 职场文书
新年主持词
2014/03/27 职场文书
《生物入侵者》教学反思
2016/02/16 职场文书
详解Flask开发技巧之异常处理
2021/06/15 Python
mysql left join快速转inner join的过程
2021/06/30 MySQL
SpringBoot Http远程调用的方法
2022/08/14 Java/Android