鼠标经过tr时,改变tr当前背景颜色
更新时间：2014年01月13日 10:11:04 作者：
本篇文章主要介绍了鼠标经过tr时,改变tr当前背景颜色的示例代码，需要的朋友可以过来参考下，希望对大家有所帮助
示例如下：
<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>
复制代码 代码如下:
<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>
您可能感兴趣的文章:
- 兼容ie和firefox的鼠标经过(onmouseover和onmouseout)实现--简短版
- js实现图片显示局部，鼠标经过显示全部的效果
- Javascript实现的鼠标经过时播放声音
- 鼠标经过导航菜单时颜色改变效果
- javascript学习笔记（二） 鼠标经过时，改变div块的背景色的代码
- javascript中onmouse事件在div中失效问题的解决方法
- jquery插件实现鼠标经过图片右侧显示大图的效果(类似淘宝)
- 鼠标经过显示二级菜单js特效
- CSS鼠标响应事件经过、移动、点击示例介绍
- jquery左右滚动焦点图banner图片鼠标经过显示上下页按钮
- jquery给图片添加鼠标经过时的边框效果
- jquery简单实现鼠标经过导航条改变背景图
- Jquery中国地图热点效果-鼠标经过弹出提示层信息的简单实例
- jq实现酷炫的鼠标经过图片翻滚效果
- jQuery 鼠标经过(hover)事件的延时处理示例
- 使用mouse事件实现简单的鼠标经过特效
相关文章
最近小编在做一个裁剪头像的功能，下面小编把使用cropper.js裁剪头像的实例代码分享到脚本之家平台，需要朋友参考下吧2017-09-09
下面小编就为大家带来一篇用js动态添加html元素,以及属性的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-07-07
有时候我们在设计网页的时候想动态的加载css文件,并不是将css文件写死在页面中,这时就可以使用下面方法.2009-07-07
这篇文章主要为大家介绍了js实现数组转树示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-06-06
这篇文章主要介绍了webpack4 optimization使用总结，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-11-11
javascript中JSON.parse()与eval()解析json的区别
这篇文章主要介绍了javascript中JSON.parse()与eval()解析json的区别,详细描述了json格式数据的操作技巧,并结合实例形式对比分析了使用JSON.parse()与eval()解析json的区别,需要的朋友可以参考下2016-05-05
在很多时候都需要用到验证码，前端验证码需要知道Html5中的canvas知识点。验证码生成步骤是：1.生成一张画布canvas 2.生成随机数验证码 3.在画布中生成干扰线 4.把验证码文本填充到画布中 5.点击画布更换验证码2017-04-04
bootstrap框架中的网格系统就是将容器平分成12份，在使用的时候可以根据实际情况重新编译LESS/SASS源码来修改12这个数值。接下来通过本文给大家介绍Bootstrap网格系统，感兴趣的朋友一起学习2016-04-04
javascript设计模式之Adapter模式【适配器模式】实现方法示例
这篇文章主要介绍了javascript设计模式之Adapter模式,结合实例形式分析了JS适配器模式的原理与具体实现方法,具有一定参考借鉴价值,需要的朋友可以参考下2017-01-01
这篇文章主要为大家详细介绍了js实现电灯开关效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-01-01
最新评论