GridView每行悬停变色
服务端实现方法
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
e.Row.Attributes.Add("onmouseover", "currentColor=this.style.backgroundColor;this.style.backgroundColor='#6699ff';");
e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor=currentColor;");
}
}
客户端实现方法,注意要把下面的JS放在服务器端标签的后面。
<style type="text/css" >
.mouseOver{
background-color:#6699ff;
}
.mouseOut{
background-color:#eff3fb;
}
</style>
<asp:GridView ID="GridView1"> </asp:GridView>
<script type="text/javascript">
function HoverColor()
{
var trs = document.getElementById("GridView1").rows;
var currentColor;
for (var i=0;i<trs.length;i++)
{
trs[i].onmouseover = function(){
//trs[i].className = "mouseOver";
currentColor = this.style.backgroundColor;
this.style.backgroundColor = "blue";
};
trs[i].onmouseout = function(){
//this.className = "mouseOut";
this.style.backgroundColor= currentColor;
};
}
}
window.onload = HoverColor; //函数名不能加引号
</script>
GridView每行悬停变色
最新推荐文章于 2024-07-23 16:48:50 发布