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 相关文章推荐
jQuery 图像裁剪插件Jcrop的简单使用
May 22 Javascript
可以用来调试JavaScript错误的解决方案
Aug 07 Javascript
JavaScript解析URL参数示例代码
Aug 12 Javascript
ExtJS如何设置与获取radio控件的选取状态
Jan 22 Javascript
一个html5播放视频的video控件只支持android的默认格式mp4和3gp
May 08 Javascript
弹出遮罩层后禁止滚动效果【实现代码】
Apr 29 Javascript
利用Javascript仿Excel的数据透视分析功能
Sep 07 Javascript
vue.js学习笔记:如何加载本地json文件
Jan 17 Javascript
微信小程序多列选择器range-key使用详解
Mar 30 Javascript
MUI 实现侧滑菜单及其主体部分上下滑动的方法
Jan 25 Javascript
微信小程序自定义对话框弹出和隐藏动画
Jul 19 Javascript
ant design 日期格式化的实现
Oct 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
php 文件上传系统手记
2009/10/26 PHP
使用php统计字符串中中英文字符的个数
2013/06/23 PHP
浅谈php扩展imagick
2014/06/02 PHP
PHP strip_tags() 去字符串中的 HTML、XML 以及 PHP 标签的函数
2016/05/22 PHP
提交表单后 PHP获取提交内容的实现方法
2016/05/25 PHP
如何用PHP做到页面注册审核
2017/03/02 PHP
YII分模块加载路由的实现方法
2018/10/01 PHP
PHP获取当前系统时间的方法小结
2018/10/03 PHP
jQuery Ajax 实例全解析
2011/04/20 Javascript
jQuery1.6 使用方法一
2011/11/23 Javascript
浅谈JavaScript字符串与数组
2015/06/03 Javascript
JavaScript电子时钟倒计时
2016/01/09 Javascript
JS Input里添加小图标的两种方法
2017/11/11 Javascript
微信小程序五子棋游戏的棋盘,重置,对弈实现方法【附demo源码下载】
2019/02/20 Javascript
vue中axios请求的封装实例代码
2019/03/23 Javascript
python僵尸进程产生的原因
2017/07/21 Python
在Python中实现shuffle给列表洗牌
2018/11/08 Python
对django后台admin下拉框进行过滤的实例
2019/07/26 Python
Django+zTree构建组织架构树的方法
2019/08/21 Python
python3 selenium自动化测试 强大的CSS定位方法
2019/08/23 Python
Python小程序之在图片上加入数字的代码
2019/11/26 Python
Pycharm2020.1安装中文语言插件的详细教程(不需要汉化)
2020/08/07 Python
python使用Windows的wmic命令监控文件运行状况,如有异常发送邮件报警
2021/01/30 Python
英文简历中的自我评价用语
2013/12/09 职场文书
巧克力蛋糕店创业计划书
2014/01/14 职场文书
上课看小说检讨书
2014/02/22 职场文书
大班上学期幼儿评语
2014/04/30 职场文书
个人房屋买卖协议书(范本)
2014/10/04 职场文书
党员民主评议总结
2014/10/20 职场文书
2015年学校德育工作总结
2015/04/22 职场文书
法制教育观后感
2015/06/17 职场文书
2015年学校教研室主任工作总结
2015/07/20 职场文书
2019个人半年工作总结
2019/06/21 职场文书
nginx配置ssl实现https的方法示例
2021/03/31 Servers
NodeJs内存占用过高的排查实战记录
2021/05/10 NodeJs
Python打包为exe详细教程
2021/05/18 Python