GridView每行悬停变色

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放在服务器端标签的后面。 <mce:style type="text/css" ><!-- .mouseOver{ background-color:#6699ff; } .mouseOut{ background-color:#eff3fb; } --></mce:style><style type="text/css" mce_bogus="1"> .mouseOver{ background-color:#6699ff; } .mouseOut{ background-color:#eff3fb; } </style> <asp:GridView ID="GridView1"> </asp:GridView> <mce: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; //函数名不能加引号 // --></mce:script>

你可能感兴趣的:(GridView每行悬停变色)