鼠标经过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事件实现简单的鼠标经过特效
相关文章
JavaScript高级程序设计 阅读笔记（十五） 浏览器中的JavaScript
Window对象对操作浏览器窗口非常有用，开发者可以移动或调整浏览器窗口的大小2012-08-08
本文主要对javascript实现图片切换（动画版）的方法进行步骤分析、实例介绍，具有很好的参考价值，需要的朋友一起来看下吧2016-12-12
轮播效果是老生常谈的话题，今天小编通过实例代码给大家分享原生JS实现简单的无缝自动轮播效果，感兴趣的朋友跟随小编一起学习吧2018-09-09
这篇文章主要为大家详细介绍了JS实现n秒后自动跳转的两种方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-07-07
先明白js能放在HTML的那个位置，分别是head和body中。大部分人都是放到head里面的。下面为大家介绍下放到这两个地方的区别2013-08-08
这篇文章给大家分享了JavaScript实现添加给定的标签选项的相关知识点内容以及代码实例，有兴趣的朋友们参考下。2018-09-09
自己写了个JS+CSS的小东西，用来看提升用户体验的。 Name：WindowsTextShow；2008-12-12
这篇文章主要介绍了JS获取月份最后天数、最大天数与某日周数的方法,涉及JavaScript针对日期与实现的相关操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-12-12
本文主要介绍JS原型链的知识，这里整理了相关资料及简单实现示例代码，有兴趣的小伙伴可以参考下2016-09-09
这篇文章主要介绍了TypeScript魔法堂之枚举的超实用手册，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-10-10
最新评论