JS实现的表格行鼠标点击高亮效果代码


Posted in Javascript onNovember 27, 2015

本文实例讲述了JS实现的表格行鼠标点击高亮效果代码。分享给大家供大家参考,具体如下:

偶尔在看天天基金网净值公告时,从源代码里剥下的一段js代码,感觉比较实用,分享一下(仅IE有效)

<script type="text/javascript">
var highlightcolor='#E0F2FE';
var clickcolor='#ffedd2';
function MouseOver(){
 var source=event.srcElement;  
 if (source.tagName=="TD"){  
  source=source.parentElement;
  var cells = source.children; 
  if (cells[0].style.backgroundColor!=highlightcolor&&cells[0].style.backgroundColor!=clickcolor)
   for(i=0;i<cells.length;i++){
    cells[i].style.backgroundColor=highlightcolor;
   }  
 }
}
function MouseOut(){ 
 var source=event.srcElement;
 if (source.tagName=="TD"){ 
  source=source.parentElement;
  var cells = source.children; 
  if (cells[0].style.backgroundColor!=clickcolor) 
   for(i=0;i<cells.length;i++){
    cells[i].style.backgroundColor="";
   }  
 }
}
function MouseClick(){
 var source=event.srcElement;
 if (source.tagName=="TD"){ 
  source=source.parentElement;
  var cells = source.children;
  if (cells[0].style.backgroundColor!=clickcolor)
   for(i=0;i<cells.length;i++)
    cells[i].style.backgroundColor=clickcolor;   
  else
   for(i=0;i<cells.length;i++)
    cells[i].style.backgroundColor=""; 
 }
}
</script>
<table onmouseover="MouseOver()" onclick="MouseClick()" onmouseout="MouseOut()" cellspacing="0" bordercolordark="#ffffff" bordercolorlight="#cccccc" border="1" width="80%" align="center" style="cursor:pointer"> 
 <tr>
  <td>1</td>
  <td>a</td>
  <td>b</td>  
 </tr>
 <tr>
  <td>2</td>
  <td>c</td>
  <td>d</td>  
 </tr>
 <tr>
  <td>3</td>
  <td>e</td>
  <td>f </td>  
 </tr> 
 <tr>
  <td>4</td>
  <td>g</td>
  <td>h </td>  
 </tr> 
</table>

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
js或css文件后面跟参数的原因说明
Jan 09 Javascript
javascript full screen 全屏显示页面元素的方法
Sep 27 Javascript
JQuery球队选择实例
May 18 Javascript
jQuery+CSS实现简单切换菜单示例
Jul 27 Javascript
JavaScript编写一个简易购物车功能
Sep 17 Javascript
Javascript单例模式的介绍和实例
Oct 08 Javascript
小程序点赞收藏功能的实现代码示例
Sep 07 Javascript
原生JS实现随机点名项目的实例代码
Apr 30 Javascript
ES6数组与对象的解构赋值详解
Jun 14 Javascript
jQuery编写QQ简易聊天框
Aug 27 jQuery
Vue使用鼠标在Canvas上绘制矩形
Dec 24 Vue.js
浅谈 JavaScript 沙箱Sandbox
Nov 02 Javascript
基于jquery animate操作css样式属性小结
Nov 27 #Javascript
Javascript简单实现面向对象编程继承实例代码
Nov 27 #Javascript
分享一些常用的jQuery动画事件和动画函数
Nov 27 #Javascript
JS实现的仿淘宝交易倒计时效果
Nov 27 #Javascript
谈谈jQuery Ajax用法详解
Nov 27 #Javascript
JavaScript中使用sencha gridpanel 编辑单元格、改变单元格颜色
Nov 26 #Javascript
基于jquery实现全屏滚动效果
Nov 26 #Javascript
You might like
PHP array_flip() 删除重复数组元素专用函数
2010/05/16 PHP
PHP中fwrite与file_put_contents性能测试代码
2013/08/02 PHP
推荐一款PHP+jQuery制作的列表分页的功能模块
2014/10/14 PHP
php获取url参数方法总结
2014/11/13 PHP
JQUERY复选框CHECKBOX全选,取消全选
2008/08/30 Javascript
Moment.js 不容错过的超棒Javascript日期处理类库
2012/04/15 Javascript
jQuery阻止同类型事件小结
2013/04/19 Javascript
基于jquery实现一张图片点击鼠标放大再点缩小
2013/09/29 Javascript
jQuery实现HTML5 placeholder效果实例
2014/12/09 Javascript
jQuery-1.9.1源码分析系列(十)事件系统之事件体系结构
2015/11/19 Javascript
使用jQuery Ajax 请求webservice来实现更简练的Ajax
2016/08/04 Javascript
jQuery EasyUI datagrid在翻页以后仍能记录被选中行的实现代码
2016/08/15 Javascript
js实现table添加行tr、删除行tr、清空行tr的简单实例
2016/10/15 Javascript
学习JavaScript图片预加载模块
2016/11/07 Javascript
使用MUI框架模拟手机端的下拉刷新和上拉加载功能
2017/09/04 Javascript
jQuery实现的回车触发按钮事件功能示例
2018/03/25 jQuery
解决element UI 自定义传参的问题
2018/08/22 Javascript
详解Vue.js自定义tipOnce指令用法实例
2018/12/19 Javascript
vue基础之模板和过滤器用法实例分析
2019/03/12 Javascript
vue实现倒计时获取验证码效果
2020/04/17 Javascript
Vue Render函数原理及代码实例解析
2020/07/30 Javascript
Python探索之自定义实现线程池
2017/10/27 Python
Python字符串格式化%s%d%f详解
2018/02/02 Python
Python3爬虫爬取百姓网列表并保存为json功能示例【基于request、lxml和json模块】
2018/12/05 Python
python如何进入交互模式
2020/07/06 Python
如何使用PyCharm引入需要使用的包的方法
2020/09/22 Python
浅谈基于HTML5的在线视频播放方案
2016/02/18 HTML / CSS
安全事故检讨书
2014/01/18 职场文书
师德学习感言
2014/01/31 职场文书
公司晚会主持词
2014/03/22 职场文书
学校清明节活动总结
2014/07/04 职场文书
房地产工程部经理岗位职责
2015/04/09 职场文书
红高粱观后感
2015/06/10 职场文书
利用Python判断你的密码难度等级
2021/06/02 Python
Spring Data JPA框架的核心概念和Repository接口
2022/04/28 Java/Android
apache虚拟主机配置的三种方式(小结)
2022/07/23 Servers