纯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 相关文章推荐
js+css实现导航效果实例
Feb 10 Javascript
js实现贪吃蛇小游戏(容易理解)
Jan 22 Javascript
详解node中创建服务进程
May 09 Javascript
vue事件修饰符和按键修饰符用法总结
Jul 25 Javascript
VSCode 配置React Native开发环境的方法
Dec 27 Javascript
深入理解requireJS-实现一个简单的模块加载器
Jan 15 Javascript
Vue核心概念Getter的使用方法
Jan 18 Javascript
详解使用Nuxt.js快速搭建服务端渲染(SSR)应用
Mar 13 Javascript
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
May 13 jQuery
关于element-ui的隐藏组件el-scrollbar的使用
May 29 Javascript
详解vue 动态加载并注册组件且通过 render动态创建该组件
May 30 Javascript
layui 实现自动选择radio单选框(checked)的方法
Sep 03 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
apache配置虚拟主机的方法详解
2013/06/17 PHP
二进制交叉权限微型php类分享
2014/02/07 PHP
在vs2010中调试javascript代码方法
2011/02/11 Javascript
ie6下png图片背景不透明的解决办法使用js实现
2013/01/11 Javascript
JS实现的省份级联实例代码
2013/06/24 Javascript
Javascript拓展String方法小结
2013/07/08 Javascript
js监听鼠标点击和键盘点击事件并自动跳转页面
2014/09/24 Javascript
在for循环中length值是否需要缓存
2015/07/27 Javascript
JavaScript获取css行间样式,内连样式和外链样式的简单方法
2016/07/18 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(二)之数据支持json字符串、list集合
2016/08/11 Javascript
jquery+ajax实现省市区三级联动效果简单示例
2017/01/04 Javascript
Vuex模块化实现待办事项的状态管理
2017/03/15 Javascript
Bootstrap标签页(Tab)插件使用方法
2017/03/21 Javascript
详解webpack打包时排除其中一个css、js文件或单独打包一个css、js文件(两种方法)
2018/10/26 Javascript
layui实现数据表格自定义数据项
2019/10/26 Javascript
[49:29]LGD vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
[01:20:30]OG vs LGD 2018国际邀请赛淘汰赛BO3 第四场 8.26
2018/08/30 DOTA
python获取图片颜色信息的方法
2015/03/18 Python
12步教你理解Python装饰器
2016/02/25 Python
Python注释详解
2016/06/01 Python
python实现单线程多任务非阻塞TCP服务端
2017/06/13 Python
利用python爬取散文网的文章实例教程
2017/06/18 Python
python实现图片插入文字
2019/11/26 Python
信号生成及DFT的python实现方式
2020/02/25 Python
python实现简单坦克大战
2020/03/27 Python
详解Pycharm安装及Django安装配置指南
2020/09/15 Python
python实现无边框进度条的实例代码
2020/12/30 Python
css3实现波纹特效、H5实现动态波浪效果
2018/01/31 HTML / CSS
大学生思想汇报范文
2013/12/31 职场文书
八年级生物教学反思
2014/01/22 职场文书
竞争上岗实施方案
2014/03/21 职场文书
医院护士党的群众路线教育实践活动对照检查材料思想汇报
2014/10/04 职场文书
反腐倡廉主题教育活动总结
2015/05/07 职场文书
人生遥控器观后感
2015/06/11 职场文书
2015年物流客服工作总结
2015/07/27 职场文书
女人创业励志语录,句句蕴含能量,激发你的潜能
2019/08/20 职场文书