动态添加mouseover和mouseout事件的js代码

发布时间:2020-03-23编辑:脚本学堂
本文介绍在网页中动态添加mouseover和mouseout事件的方法,有需要的朋友,可以参考下。

本文给出的例子,是等页面输出完毕后,用脚本将mouseover和mouseout事件添加到具体的页面对象上。
相比传统的网页载入时就已经绑定的方法,要灵活的多。

1、js代码
 

复制代码 代码示例:
$(document).ready(function() { 
   $("#tbList tr").not("#trTop").not("#trHead").mouseover(function(){ $(this).css("background-color","#f1F8F9");}); 
   $("#tbList tr").not("#trTop").not("#trHead").mouseout(function(){ $(this).css("background-color","white");}); 
}) 


     
说明:
tbList是table的ID
trTop,trHead是固定背景色的行,无须这种背景置亮效果。

2、html页面内容
 

复制代码 代码示例:
<table id="tbList" width="100%" cellpadding="0" cellspacing="0"> 
<tr id="trTop"> 
<td colspan="5"> 
脚本学堂,有好多的正则表达式教程哦。 
<br/>
这里放置您的内容。
</td> 
</tr> 
<tr id="trHead"> 
<td id="gap"></td> 
<td>标题</td> 
<td style="width:35px;">私密</td> 
<td style="width:45px;">日期</td> 
<td style="width:65px;">操作</td> 
</tr> 
<tr> 
<td></td> 
<td><span><a href="mine_show.aspx?id=19" title="脚本学堂_www.jb200.com" target="_blank">脚本学堂_www.jb200.com,欢迎大家的光临!</a></span></td> 
<td>公开</td> 
<td>10-13</td> 
<td>
    <a href='/Add.aspx?id=19'>编辑</a> 
    <a href="javascript:DelIt(19)">删除</a> 
</td> 
</tr> 
</table>