Asp.net_GridView隔行变色和光棒效果

方法一：前台和后台配合使用

1.aspx 隔行变色属性（<AlternatingRowStyle BackColor="#f5f5f5" />）

<asp:GridView ID="gvProjectList" runat="server"
                                        OnRowCreated="gvProjectList_RowCreated">
                                        <AlternatingRowStyle BackColor="#f5f5f5" />
                                    </asp:GridView>

1.aspx.cs 后台事件中设置鼠标至于某行上的变色效果

    protected void gvProjectList_RowCreated(object sender, GridViewRowEventArgs e)
    {
        e.Row.Attributes.Add("onmouseover", "currentcolor=this.style.backgroundColor;this.style.backgroundColor='#eaeaea';");//这是鼠标移到某行时改变某行的背景
        e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor=currentcolor;");//鼠标移走时恢复
    }

方法二：JQuery方式

1.aspx

首先引用 jQuery 函数库,在http://jquery.com/ 下载，然后写css样式，再加入js代码。

<script src="jquery-1.5.2.min.js" type="text/javascript"></script>

   <style type="text/css">
    .even {
         background:#F5F5F5;
    }

    .odd {
         background:#FFFFFF;
    }

    .over{
         background:#CDE6FF;
    }

    .tr_chouse {
         background:#6AB1FF;
    }
     </style>

<script type="text/javascript">
        $(document).ready(function(){
        $(".gridview tr:odd").addClass("odd");     //奇数行设定为 "odd" 样式
        $(".gridview tr:even").addClass("even");   //偶数行设定为 "even" 样式
        $(".gridview tr").mouseover(function(){$(this).addClass("over");})     //当 mouseover 时加入 "over" 样式
                         .mouseout(function(){$(this).removeClass("over");})   //当 mouseout 时移除 "over" 样式
                         .click(function(){$(this).toggleClass("tr_chouse");}) //当 click 加入或移除 "tr_chouse" 样式，实现数据列选取
     });
</script>