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中的window.open返回object的错误的解决方法
Aug 15 Javascript
修改jquery.lazyload.js实现页面延迟载入
Dec 22 Javascript
Ubuntu 11.10 安装Node.js的方法
Nov 30 Javascript
基于JavaScript 声明全局变量的三种方式详解
May 07 Javascript
javascript框架设计之种子模块
Jun 23 Javascript
JavaScript实战(原生range和自定义特效)简单实例
Aug 21 Javascript
Node.js 日志处理模块log4js
Aug 28 Javascript
微信小程序实战之顶部导航栏(选项卡)(1)
Jun 19 Javascript
js 实现在2d平面上画8的方法
Oct 10 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【矩形情况】
Dec 13 Javascript
js尾调用优化的实现
May 23 Javascript
小程序如何写动态标签的实现方法
Feb 05 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之第六天
2006/10/09 PHP
关于php curl获取301或302转向的网址问题的解决方法
2011/06/02 PHP
PHP抽象类 介绍
2012/06/13 PHP
PHP安全性漫谈
2012/06/28 PHP
php实现过滤表单提交中html标签的方法
2014/10/17 PHP
IIS下PHP的三种配置方式对比
2014/11/20 PHP
PHP加密技术的简单实现
2016/09/04 PHP
php中mkdir()函数的权限问题分析
2016/09/24 PHP
php使用mysqli和pdo扩展,测试对比连接mysql数据库的效率完整示例
2019/05/09 PHP
如何在PHP中生成随机数
2020/06/04 PHP
表单(FORM)的一些实用效果代码
2007/03/25 Javascript
jQuery中对未来的元素绑定事件用bind、live or on
2014/04/17 Javascript
js实现ifram取父窗口URL地址的方法
2015/02/09 Javascript
为什么JS中eval处理JSON数据要加括号
2015/04/13 Javascript
javascript中JSON对象与JSON字符串相互转换实例
2015/07/11 Javascript
Ajax异步文件上传与NodeJS express服务端处理
2017/04/01 NodeJs
详解angular 中的自定义指令之详解API
2017/06/20 Javascript
详解Angular 开发环境搭建
2017/06/22 Javascript
vue组件从开发到发布的实现步骤
2018/11/11 Javascript
微信运维交互机器人的示例代码
2018/11/12 Javascript
JavaScript创建防篡改对象的方法分析
2018/12/30 Javascript
Python实现爬取亚马逊数据并打印出Excel文件操作示例
2019/05/16 Python
Pandas 缺失数据处理的实现
2019/11/04 Python
django实现日志按日期分割
2020/05/21 Python
Python 操作 MySQL数据库
2020/09/18 Python
html5理解head_动力节点Java学院整理
2017/07/13 HTML / CSS
英国领先的办公用品供应商:Viking
2016/08/01 全球购物
Farfetch香港官网:汇集全球时尚奢侈品购物平台
2017/11/26 全球购物
Myprotein比利时官方网站:欧洲第一运动营养品牌
2020/10/04 全球购物
竞聘医务工作人员的自我评价分享
2013/11/04 职场文书
校运会广播稿100字
2014/01/27 职场文书
事业单位竞聘上岗实施方案
2014/03/28 职场文书
教师工作决心书
2015/02/04 职场文书
高三数学教学反思
2016/02/18 职场文书
2016最新离婚协议书范本及程序
2016/03/18 职场文书
基于angular实现树形二级表格
2021/10/16 Javascript