纯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 相关文章推荐
javascript 当前日期加(天、周、月、年)
Aug 09 Javascript
使用jQuery清空file文件域的解决方案
Apr 12 Javascript
setInterval计时器不准的问题解决方法
May 08 Javascript
jquery bind(click)传参让列表中每行绑定一个事件
Aug 06 Javascript
jQuery+ajax中getJSON() 用法实例
Dec 22 Javascript
JS选项卡动态替换banner图片路径的方法
May 11 Javascript
Bootstrap4一次重大更新 几乎涉及每行代码
May 16 Javascript
JavaScript禁止微信浏览器下拉回弹效果
May 16 Javascript
node中的密码安全(加密)
Sep 17 Javascript
jquery实现动态创建form并提交的方法示例
May 27 jQuery
原生js滑动轮播封装
Jul 31 Javascript
JavaScript实现图片放大预览效果
Nov 02 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
PHP 一个随机字符串生成代码
2010/05/26 PHP
php截取字符串函数substr,iconv_substr,mb_substr示例以及优劣分析
2014/06/10 PHP
codeigniter实现get分页的方法
2015/07/10 PHP
PHP实现的简单缓存类
2015/07/29 PHP
PHP去掉json字符串中的反斜杠\及去掉双引号前的反斜杠
2015/09/30 PHP
网页中的图片的处理方法与代码
2009/11/26 Javascript
Javascript变量函数浅析
2011/09/02 Javascript
jquery ajax提交整个表单元素的快捷办法
2013/03/27 Javascript
jQuery 获取和设置select下拉框的值实现代码
2013/11/08 Javascript
js获取select标签选中值的两种方式
2014/01/09 Javascript
js使用正则实现ReplaceAll全部替换的方法
2014/07/18 Javascript
jQuery实现自动调整字体大小的方法
2015/06/15 Javascript
使用Angular缓存父页面数据的方法
2017/01/03 Javascript
javascript图片预览和上传(兼容IE)
2017/03/15 Javascript
jquery中封装函数传递当前元素的方法示例
2017/05/05 jQuery
Angular2使用Angular-CLI快速搭建工程(二)
2017/05/21 Javascript
JavaScript实现的原生态兼容IE6可调可控滚动文字功能详解
2017/09/19 Javascript
JavaScript实现的超简单计算器功能示例
2017/12/23 Javascript
基于vue 开发中出现警告问题去除方法
2018/01/25 Javascript
还不懂递归?读完这篇文章保证你会懂
2018/07/29 Javascript
vue中关闭eslint的方法分析
2018/08/04 Javascript
vue中的 $slot 获取插槽的节点实例
2019/11/12 Javascript
javascript实现评分功能
2020/06/24 Javascript
vant-ui框架的一个bug(解决切换后onload不触发)
2020/11/11 Javascript
JavaScript中的几种继承方法示例
2020/12/06 Javascript
[53:49]LGD vs Fnatic 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
[52:02]DOTA2-DPC中国联赛 正赛 Phoenix vs Dragon BO3 第二场 2月26日
2021/03/11 DOTA
用python实现批量重命名文件的代码
2012/05/25 Python
Python 批量合并多个txt文件的实例讲解
2018/05/08 Python
python读取图片任意范围区域
2019/01/23 Python
Python实例方法、类方法、静态方法的区别与作用详解
2019/03/25 Python
Python 如何反方向迭代一个序列
2020/07/28 Python
民主生活会对照检查材料范文
2014/10/01 职场文书
大学生创业计划书常用模板
2019/08/07 职场文书
OpenCV-Python实现油画效果的实例
2021/06/08 Python
OpenCV实现普通阈值
2021/11/17 Java/Android