gridview实现点击行变色

最新推荐文章于 2015-01-09 15:25:26 发布

原创最新推荐文章于 2015-01-09 15:25:26 发布 · 2.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #null #function #object #server #脚本

本文介绍了一个使用ASP.NET GridView控件结合JavaScript来实现表格行被选中时颜色变化的效果，同时还包括了鼠标悬停时背景颜色的临时改变。通过前后端交互，提升了用户体验。

前台脚本

        var prev=null;
        function selectx(row)   /**//*改变选中行的颜色还原为选中行的颜色*/
        {
            if(prev!=null)
            {
                 prev.style.backgroundColor='#FFFFFF';
             }
             row.style.backgroundColor='#EEEEEE';

             prev=row;

         }
    </script>

<asp:GridView ID="GridView1" runat="server" onrowdatabound="GridView1_RowDataBound">
</asp:GridView>

后台

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow)
        {

            e.Row.Attributes.Add("onmouseover", "if(this!=prev){c=this.style.backgroundColor;this.style.backgroundColor='#EEEEEE'}");//当鼠标停留时更改背景色
            e.Row.Attributes.Add("onmouseout", "if(this!=prev){this.style.backgroundColor=c}");//当鼠标移开时还原背景色
            e.Row.Attributes["style"] = "Cursor:hand";//设置悬浮鼠标指针形状为"小手"
            e.Row.Attributes.Add("onclick", "selectx(this)");//调用页面javascript
        }
    }