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 相关文章推荐
JavaScript入门教程(10) 认识其他对象
Jan 31 Javascript
开发 Internet Explorer 右键功能表(ContextMenu)
Jul 03 Javascript
javascript unicode与GBK2312(中文)编码转换方法
Nov 14 Javascript
js实现头像图片切割缩放及无刷新上传图片的方法
Jul 17 Javascript
详解jQuery简单的表格应用
Dec 16 Javascript
jQuery阻止移动端遮罩层后页面滚动
Mar 15 Javascript
Node.js中 __dirname 的使用介绍
Jun 19 Javascript
jQuery点击页面其他部分隐藏下拉菜单功能
Nov 27 jQuery
JavaScript的查询机制LHS和RHS解析
Aug 16 Javascript
jQuery实现鼠标滑动切换图片
May 27 jQuery
jQuery实现鼠标拖拽登录框移动效果
Sep 13 jQuery
测量JavaScript函数的性能各种方式对比
Apr 27 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
apache+mysql+php+ssl服务器之完全安装攻略
2006/09/05 PHP
php cookie 登录验证示例代码
2009/03/16 PHP
查找mysql字段中固定字符串并替换的几个方法
2012/09/23 PHP
使用JavaScript创建新样式表和新样式规则
2016/06/14 PHP
PHP 进度条函数的简单实例
2017/09/19 PHP
JavaScript的Function详细
2006/11/14 Javascript
我也种棵OO树JXTree[js+css+xml]
2007/04/02 Javascript
细品javascript 寻址,闭包,对象模型和相关问题
2009/04/27 Javascript
js 实现打印网页中定义的部分内容的代码
2010/04/01 Javascript
jQuery 源码分析笔记(5) jQuery.support
2011/06/19 Javascript
UI Events 用户界面事件
2012/06/27 Javascript
利用javascript实现web页面中指定区域打印
2013/10/30 Javascript
浅谈下拉菜单中的Option对象
2015/05/10 Javascript
jquery显示loading图片直到网页加载完成的方法
2015/06/25 Javascript
Bootstrap组件系列之福利篇几款好用的组件(推荐)
2016/06/23 Javascript
[01:31](回顾)杀出重围,决战TI之巅
2014/07/01 DOTA
Python用Bottle轻量级框架进行Web开发
2016/06/08 Python
python编写微信远程控制电脑的程序
2018/01/05 Python
Python模拟登录的多种方法(四种)
2018/06/01 Python
pygame游戏之旅 添加icon和bgm音效的方法
2018/11/21 Python
Python的in,is和id函数代码实例
2020/04/18 Python
html5+svg学习指南之SVG基础知识
2014/12/17 HTML / CSS
Html5移动端网页端适配(js+rem)
2021/02/03 HTML / CSS
什么是继承
2013/12/07 面试题
毕业生自荐书
2014/02/02 职场文书
送餐员岗位职责范本
2014/02/21 职场文书
低碳生活的宣传标语
2014/06/23 职场文书
本科毕业生应聘求职信
2014/07/06 职场文书
仲裁协议书
2014/09/26 职场文书
公安局班子个人对照检查材料思想汇报
2014/10/09 职场文书
个人作风建设剖析材料
2014/10/11 职场文书
2015年安全生产目标责任书
2015/01/29 职场文书
酒店仓管员岗位职责
2015/04/01 职场文书
新娘婚礼答谢词
2015/09/29 职场文书
创业计划书之婴幼儿游泳馆
2019/09/11 职场文书
导游词之南迦巴瓦峰
2019/11/19 职场文书