GridView鼠标移动行变色

本文介绍了三种实现 ASP.NET GridView 控件在鼠标悬停时更改背景颜色的方法,通过 RowDataBound 事件及 JavaScript 实现交互效果。
None.gif方法一:   
None.gif  
None.gif在GridView的   
None.gif  
None.gif
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)   
ExpandedBlockStart.gifContractedBlock.gif    
dot.gif{   
InBlock.gif        
if (e.Row.RowType == DataControlRowType.DataRow)   
ExpandedSubBlockStart.gifContractedSubBlock.gif        
dot.gif{   
InBlock.gif            e.Row.Attributes.Add(
"onMouseOver""SetNewColor(this);");   
InBlock.gif            e.Row.Attributes.Add(
"onMouseOut""SetOldColor(this);");   
ExpandedSubBlockEnd.gif        }
   
ExpandedBlockEnd.gif    }
   
None.gif  
None.gif在页面中加入   
None.gif  
None.gif
<SCRIPT language=javascript>   
None.gif       var _oldColor;   
None.gif       function SetNewColor(source)   
ExpandedBlockStart.gifContractedBlock.gif       
dot.gif{   
InBlock.gif          _oldColor
=source.style.backgroundColor;   
InBlock.gif          source.style.backgroundColor
='#666666';   
InBlock.gif             
ExpandedBlockEnd.gif       }
   
None.gif       function SetOldColor(source)   
ExpandedBlockStart.gifContractedBlock.gif       
dot.gif{   
InBlock.gif         source.style.backgroundColor
=_oldColor;   
ExpandedBlockEnd.gif       }
   
None.gif    
</SCRIPT>   
None.gif  
None.gif    
None.gif  
None.gif方法二:   
None.gif  
None.gif    
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)   
ExpandedBlockStart.gifContractedBlock.gif    
dot.gif{   
InBlock.gif        
if (e.Row.RowType == DataControlRowType.DataRow)   
ExpandedSubBlockStart.gifContractedSubBlock.gif        
dot.gif{   
InBlock.gif            e.Row.Attributes[
"onMouseOver"= "js.ItemOver(this)";   
ExpandedSubBlockEnd.gif        }
   
ExpandedBlockEnd.gif    }
   
None.gif  
None.gif在页面上加入   
None.gif  
None.gif
<SCRIPT language=javascript type=text/javascript>   
ExpandedBlockStart.gifContractedBlock.gif    var js
=new function()dot.gif{   
ExpandedSubBlockStart.gifContractedSubBlock.gif    
if (!objbeforeItem)dot.gif{var objbeforeItem=null;var objbeforeItembackgroundColor=null;}   
InBlock.gif        
this.ItemOver=function(obj)   
ExpandedSubBlockStart.gifContractedSubBlock.gif    
dot.gif{   
ExpandedSubBlockStart.gifContractedSubBlock.gif        
if(objbeforeItem)dot.gif{objbeforeItem.style.backgroundColor = objbeforeItembackgroundColor;}   
InBlock.gif        objbeforeItembackgroundColor 
= obj.style.backgroundColor;   
InBlock.gif        objbeforeItem 
= obj;   
InBlock.gif        obj.style.backgroundColor 
= "#fcfcfc";        
ExpandedSubBlockEnd.gif    }
   
InBlock.gif  
ExpandedBlockEnd.gif}
   
None.gif    
</SCRIPT>   
None.gif  
None.gif方法三:   
None.gif  
None.gif 
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)   
ExpandedBlockStart.gifContractedBlock.gif    
dot.gif{   
InBlock.gif        
if (e.Row.RowType == DataControlRowType.DataRow)   
ExpandedSubBlockStart.gifContractedSubBlock.gif        
dot.gif{   
InBlock.gif         
//鼠标移动到每项时颜色交替效果   
InBlock.gif
         e.Row.Attributes.Add("OnMouseOut""this.style.backgroundColor='White';this.style.color='#003399'");   
InBlock.gif         e.Row.Attributes.Add(
"OnMouseOver""this.style.backgroundColor='#6699FF';this.style.color='#8C4510'");   
InBlock.gif  
InBlock.gif        
//设置悬浮鼠标指针形状为"小手"   
InBlock.gif
         e.Row.Attributes["style"= "Cursor:hand";   
ExpandedSubBlockEnd.gif        }
   
ExpandedBlockEnd.gif    }
  
None.gif
None.gif
None.gif
//----------------------------------------
None.gif

None.gif
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)   
ExpandedBlockStart.gifContractedBlock.gif    
dot.gif{   
InBlock.gif        
if (e.Row.RowType == DataControlRowType.DataRow) //判断是否是DataRow,以防止鼠标经过Header也有效果   
ExpandedSubBlockStart.gifContractedSubBlock.gif
        dot.gif{   
InBlock.gif            e.Row.Attributes.Add(
"onmouseover""e=this.style.backgroundColor; this.style.backgroundColor='#cccccc'");   
InBlock.gif            e.Row.Attributes.Add(
"onmouseout""this.style.backgroundColor=e");   
ExpandedSubBlockEnd.gif        }
   
ExpandedBlockEnd.gif    }
  
None.gif
None.gif

转载于:https://www.cnblogs.com/lovenets/articles/808071.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值