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 日历提醒系统( 兼容所有浏览器 )
Apr 07 Javascript
分享一个用Mootools写的鼠标滑过进度条改变进度值的实现代码
Dec 12 Javascript
js使用循环清空某个div中的input标签值
Sep 29 Javascript
理解javascript中DOM事件
Dec 25 Javascript
AngularJS自动表单验证
Feb 01 Javascript
Bootstrap每天必学之按钮(Button)插件
Apr 25 Javascript
深入解析jQuery中Deferred的deferred.promise()方法
May 03 Javascript
jQuery表单插件ajaxForm实例详解
Jan 17 Javascript
vue.js轮播图组件使用方法详解
Jul 03 Javascript
Vue模拟数据,实现路由进入商品详情页面的示例
Aug 31 Javascript
实例讲解JavaScript截取字符串
Nov 30 Javascript
antd design table更改某行数据的样式操作
Oct 31 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
把从SQL中取出的数据转化成XMl格式
2006/10/09 PHP
在线竞拍系统的PHP实现框架(一)
2006/10/09 PHP
php 缩略图实现函数代码
2011/06/23 PHP
JSON在PHP中的应用介绍
2012/09/08 PHP
利用PHP生成静态HTML文档的原理
2012/10/29 PHP
修改destoon会员公司的伪静态中的com目录的方法
2014/08/21 PHP
PHP实现随机生成水印图片功能
2017/03/22 PHP
PHP基于SimpleXML生成和解析xml的方法示例
2017/07/17 PHP
php swoft框架实例用法
2020/12/22 PHP
jquery $.ajax()取xml数据的小问题解决方法
2010/11/20 Javascript
js三种排序算法分享
2012/08/16 Javascript
jquery实现商品拖动选择效果代码(自写)
2013/05/28 Javascript
js里取容器大小、定位、距离等属性搜集整理
2013/08/19 Javascript
JQ技术实现注册页面带有校验密码强度
2015/07/27 Javascript
详解js数组的完全随机排列算法
2016/12/16 Javascript
js实现无缝滚动图(可控制当前滚动的方向)
2017/02/22 Javascript
基于匀速运动的实例讲解(侧边栏,淡入淡出)
2017/10/17 Javascript
JS实现给数组对象排序的方法分析
2019/06/24 Javascript
用原生JS实现爱奇艺首页导航栏代码实例
2019/09/19 Javascript
eslint+prettier统一代码风格的实现方法
2020/07/22 Javascript
jQuery实现动态加载瀑布流
2020/09/01 jQuery
python获取指定网页上所有超链接的方法
2015/04/04 Python
Python3基于sax解析xml操作示例
2018/05/22 Python
对Python通过pypyodbc访问Access数据库的方法详解
2018/10/27 Python
实例讲解Python中整数的最大值输出
2019/03/17 Python
python中metaclass原理与用法详解
2019/06/25 Python
Python3中configparser模块读写ini文件并解析配置的用法详解
2020/02/18 Python
利用Python函数实现一个万历表完整示例
2021/01/23 Python
世界上最大的巴士旅游观光公司:Big Bus Tours
2016/10/20 全球购物
Booking.com德国:预订最好的酒店和住宿
2020/02/16 全球购物
自动化系在校本科生求职信
2013/10/23 职场文书
《大作家的小老师》教学反思
2014/04/16 职场文书
大学军训的体会
2014/11/08 职场文书
武当山导游词
2015/02/03 职场文书
幼儿园辞职书
2015/02/26 职场文书
golang 在windows中设置环境变量的操作
2021/04/29 Golang