鼠标经过tr时,改变tr当前背景颜色


Posted in Javascript onJanuary 13, 2014

示例如下:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>鼠标经过给tr换颜色</title>    
</head>
<body>
<table align="center" width="100%" border="1" cellspacing="1" cellpadding="1" >
  <tr style="cursor:hand " onmousemove="changeTrColor(this)">
    <td align="center">1</td>
    <td height="20"> 123</td>
    <td height="20"> abvx</td>
    <td height="20"> 465465</td>
    <td height="20">546654654</td>
  </tr>
  <tr style="cursor:hand " onmousemove="changeTrColor(this)">
    <td align="center">1</td>
    <td height="20"> 123</td>
    <td height="20"> abvx</td>
    <td height="20"> 465465</td>
    <td height="20">546654654</td>
  </tr>    
  <tr style="cursor:hand " onmousemove="changeTrColor(this)">
    <td align="center">1</td>
    <td height="20"> 123</td>
    <td height="20"> abvx</td>
    <td height="20"> 465465</td>
    <td height="20">546654654</td>
  </tr>
</table>
<script type="text/javascript">
function changeTrColor(obj){    
    var _table=obj.parentNode;
    for (var i=0;i<_table.rows.length;i++){
        _table.rows[i].style.backgroundColor="";
    }    
    obj.style.backgroundColor="blue";
}
</script>
</form>
</body>
</html>
Javascript 相关文章推荐
关于火狐(firefox)及ie下event获取的两种方法
Dec 27 Javascript
JQuery中dataGrid设置行的高度示例代码
Jan 03 Javascript
javascript基于HTML5 canvas制作画箭头组件
Jun 25 Javascript
JS实现网页背景颜色与select框中颜色同时变化的方法
Feb 27 Javascript
fastclick插件导致日期(input[type=&quot;date&quot;])控件无法被触发该如何解决
Nov 09 Javascript
jquery中绑定事件的异同
Feb 28 Javascript
详解如何用webpack打包一个网站应用项目
Jul 12 Javascript
javaScript中&quot;==&quot;和&quot;===&quot;的区别详解
Mar 16 Javascript
jquery轻量级数字动画插件countUp.js使用详解
Oct 17 jQuery
p5.js临摹动态图形的方法
Oct 23 Javascript
使用Vue-scroller页面input框不能触发滑动的问题及解决方法
Aug 08 Javascript
Vue实现随机验证码功能
Dec 29 Vue.js
js导航栏单击事件背景变换示例代码
Jan 13 #Javascript
JS文本获得焦点清除文本文字的示例代码
Jan 13 #Javascript
javascript间隔定时器(延时定时器)学习 间隔调用和延时调用
Jan 13 #Javascript
parentElement,srcElement的使用小结
Jan 13 #Javascript
javaScript中的this示例学习详解及工作原理
Jan 13 #Javascript
JS 日期比较大小的简单实例
Jan 13 #Javascript
JS之Date对象和获取系统当前时间详解
Jan 13 #Javascript
You might like
php学习笔记 类的声明与对象实例化
2011/06/13 PHP
PHP实现模拟http请求的方法分析
2017/12/20 PHP
Jquery 设置标题的自动翻转
2009/10/03 Javascript
JavaScript的eval JSON object问题
2009/11/15 Javascript
JS远程获取网页源代码实例
2013/09/05 Javascript
如何从jQuery的ajax请求中删除X-Requested-With
2013/12/11 Javascript
jquery解析xml字符串简单示例
2014/04/11 Javascript
实例详解jQuery表单验证插件validate
2016/01/18 Javascript
jQuery鼠标事件总结
2016/10/13 Javascript
javascript 面向对象function详解及实例代码
2017/02/28 Javascript
AngularJS实现根据不同条件显示不同控件
2017/04/20 Javascript
Node.js 使用流实现读写同步边读边写功能
2017/09/11 Javascript
Vue中的vue-resource示例详解
2018/11/02 Javascript
基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码
2019/06/10 jQuery
基于vue.js实现购物车
2020/01/15 Javascript
uni-app使用countdown插件实现倒计时
2020/11/01 Javascript
Python中正则表达式的用法实例汇总
2014/08/18 Python
在MAC上搭建python数据分析开发环境
2016/01/26 Python
Python字符串的一些操作方法总结
2019/06/10 Python
python字符串下标与切片及使用方法
2020/02/13 Python
Python semaphore evevt生产者消费者模型原理解析
2020/03/18 Python
jupyter notebook中新建cell的方法与快捷键操作
2020/04/22 Python
Python远程linux执行命令实现
2020/11/11 Python
全球地下的服装和态度:Slam Jam
2018/02/04 全球购物
First Aid Beauty官网:FAB急救面霜
2018/05/24 全球购物
阿玛尼美妆英国官网:Giorgio Armani Beauty英国
2019/03/28 全球购物
华为智利官方商店:Huawei Chile
2020/05/09 全球购物
杭州联环马网络笔试题面试题
2013/08/04 面试题
机电一体化自荐信
2013/12/10 职场文书
秋季运动会加油稿200字
2014/01/11 职场文书
小学庆六一活动方案
2014/02/28 职场文书
倡议书范文格式
2014/05/12 职场文书
2015年组织部工作总结
2015/04/03 职场文书
详解Django中 render() 函数的使用方法
2021/04/22 Python
Python学习之时间包使用教程详解
2022/03/21 Python
Golang 对es的操作实例
2022/04/20 Golang