Gridview点击一行变色，，再点击变回原来颜色。。

GridView 样式如下：       <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" BackColor="White"
            BorderColor="#CC9966" BorderStyle="None" BorderWidth="1px" CellPadding="4" DataKeyNames="Id"
            Font-Size="10pt" OnPageIndexChanging="GridView1_PageIndexChanging" OnRowCancelingEdit="GridView1_RowCancelingEdit"
            OnRowDeleting="GridView1_RowDeleting" OnRowEditing="GridView1_RowEditing" OnRowUpdating="GridView1_RowUpdating"
            PageSize="20">                 
                 <RowStyle BackColor="White" ForeColor="#330099" />          
            <SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="#663399" />
            <PagerStyle BackColor="#FFFFCC" ForeColor="#330099" HorizontalAlign="Center" />
            <HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="#FFFFCC" CssClass="Freezing"  />
            <AlternatingRowStyle BackColor="#f5f5f5"/>        
            </asp:GridView>如何实现鼠标每单击一行，该行变色，再单击变回原来颜色（注：行颜色是一白一灰的）,请大家帮忙看看。。

解决方案 »

  1.   

    function chbg(id)
    {
       if(id.style.backgroundColor=="#CCC")
         id.style.backgroundColor=white;
       else
         id.style.backgroundColor="#CCC";
    }
    为GridView的行添加Onclick事件"chbg(this)"
      

  2.   

    在GridView的RowDataBound事件中输入以下代码:
        protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
        {
            if (e.Row.RowType == DataControlRowType.DataRow)
            {
                 e.Row.Attributes.Add("onclick", "ItemOver(this)"); 
            }
         }js代码:
        <script language="javascript" type="text/javascript">
        if (!objbeforeItem)
        {
            var objbeforeItem=null;
            var objbeforeItembackgroundColor=null;
        } 
        function ItemOver(obj)
        {
            if(objbeforeItem)
            {
                objbeforeItem.style.backgroundColor = objbeforeItembackgroundColor;
            }
            objbeforeItembackgroundColor = obj.style.backgroundColor;
            objbeforeItem = obj;
            obj.style.backgroundColor = "#FFFF00"; 
        }
        </script>
      

  3.   

    <html><head><title></title></head>
    <script type="text/javascript">
    var gdv = '<%=GridView1.ClientID%>';
    function ChangeBg() 
    { 
        var d;
        var obj = document.getElementById(gdv).getElementsByTagName("tr"); 
        for(var i=0; i<obj.length; i++)
        {
            obj[i].onclick=function()
            {
                d = d == "#fffddf" ? "#ffffff" : "#fffddf";
                this.style.backgroundColor = d;
            } 
        } 
    } if(window.attachEvent) 
        window.attachEvent("onload",ChangeBg);
    </script>
    <body>
    <form runat="server">
    这里放GridView控件,假设ID是GridView1
    </form>
    </body>
    </html>散分走人
      

  4.   

    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
        <title>无标题页</title>
        <script language="javascript" type="text/javascript">
            var oldRow = null;
            window.onload=function()
            {
                var tblId = "<%=GridView1.ClientID %>";
                var tbl = $e(tblId);
                if(tbl!=null)
                {
                    for(var i=1;i<tbl.rows.length;i++)
                    {
                        tbl.rows[i].onclick=new Function("clickRow(this)")
                    }
                }
            }
            
            function clickRow(row)
            {
                var colorHighlt = "red";
                //alert(row.rowIndex);
                if(oldRow!=row)
                {
                    if(oldRow!=null)
                    {
                        oldRow.style.backgroundColor = "";
                    }
                    row.style.backgroundColor = colorHighlt;
                }else
                {
                    row.style.backgroundColor=(row.style.backgroundColor==""?"red":"");
                }
                
                oldRow = row;
            }
            
            function $e(id)
            {
                return document.getElementById(id);
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
       
       
       <asp:GridView runat="server" ID="GridView1" Width="50%">
        
       </asp:GridView>
       
       </div>
        </form>
    </body>
    </html>
      

  5.   

    如果不考虑单击其他行把颜色改回来,应该更简单!!
    在GridView的RowDataBound事件中输入以下代码: 
        protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e) 
        { 
            if (e.Row.RowType == DataControlRowType.DataRow) 
            { 
                e.Row.Attributes.Add("onclick", "ItemOver(this)"); 
            } 
        } js:
        <script type="text/javascript">
        function ItemOver(obj) 
        { 
            obj.style.backgroundColor = (obj.style.backgroundColor==""?"#FFFF00":"")
        } 
        </script>
      

  6.   

         function rowClick(tr)
         {         
            //改变选中行的颜色
            var obj = document.getElementById("MyDataGrid1");
            if ( obj != null )
            {
    for ( var i = 1 ;i < obj.rows.length-1;i=i+2)
    {             
    obj.rows[i].className = "dgItemStyle";
    obj.rows[i+1].className = "dgAlternatingItemStyle";
    }
            }         
            tr.className="dgSelectedItemStyle";              
         } 在RowDataBind() 事件里 加上这个rowClick 就OK 了
      

  7.   

    function chbg(id) 
    { 
      if(id.style.backgroundColor=="#CCC") 
        id.style.backgroundColor=white; 
      else 
        id.style.backgroundColor="#CCC"; 
    } 
    为GridView的行添加Onclick事件"chbg
      

  8.   

    相当简单：
    #region "定义移动鼠标变色代码"
        protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
        {
            if (e.Row.RowType == DataControlRowType.DataRow)
            {
                e.Row.Attributes.Add("onmouseover", "c=this.style.backgroundColor;this.style.backgroundColor='#ACA899'");
                //当鼠标移开时还原背景色
                e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor=c");
            }
        }
        #endregion
      

  9.   

    用gridview的SelectedRowStyle属性来设置应该可以吧？
    例如：
    <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
      

  10.   

    这种效果 用JS或AJAX就可以了
    用C#实现 无语宝马耕田咯
      

  11.   

    按照楼主的要求，在dataGridView1中加一个dataGridView1_CellClick 事件就可以了。private void dataGridView1_CellClick(object sender, DataGridViewCellEventArgs e)
            {  
                int x，y;
                x = dataGridView1.CurrentRow.Index;
                for (y = 0; y <= dataGridView1.Rows[x].Cells.Count-1; y++)
                {
                    if (dataGridView1.Rows[x].Cells[y].Style.BackColor   == System.Drawing.Color.White)
                    {
                        dataGridView1.Rows[x].Cells[y].Style.BackColor = System.Drawing.Color.Gray;
                    }
                    else
                    {
                        dataGridView1.Rows[x].Cells[y].Style.BackColor = System.Drawing.Color.White;
                    } 
                
                }        }
      

  12.   

    我一直都是这样解决的
    呵呵
      
     //GridView事件绑定 （子模块 绑定）
        void gvModule_RowDataBound(object sender, GridViewRowEventArgs e)
        {
           // e.Row.Attributes.Add("onmouseover", "color=this.style.backgroundColor;this.style.backgroundColor='#ADB2C6'");
           // e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor=color");}
      

  13.   

    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
        <title>无标题页</title>
        <script language="javascript" type="text/javascript">
            var oldRow = null;
            window.onload=function()
            {
                var tblId = "<%=GridView1.ClientID %>";
                var tbl = $e(tblId);
                if(tbl!=null)
                {
                    for(var i=1;i<tbl.rows.length;i++)
                    {
                        tbl.rows[i].onclick=new Function("clickRow(this)")
                    }
                }
            }
            
            function clickRow(row)
            {
                var colorHighlt = "red";
                //alert(row.rowIndex);
                if(oldRow!=row)
                {
                    //if(oldRow!=null)
                    //{
                        //oldRow.style.backgroundColor = "";//这个地方屏蔽了就 可以了
                    //}
                    row.style.backgroundColor = colorHighlt;
                }else
                {
                    row.style.backgroundColor=(row.style.backgroundColor==""?"red":"");
                }
                
                oldRow = row;
            }
            
            function $e(id)
            {
                return document.getElementById(id);
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
       
       
       <asp:GridView runat="server" ID="GridView1" Width="50%">
        
       </asp:GridView>
       
       </div>
        </form>
    </body>
    </html>
      

  14.   

    楼主我想对你说：我对您的敬仰犹如滔滔江水连绵不绝。
    <html> <head> <title> </title> </head> 
    <script type="text/javascript"> 
    var gdv = ' <%=GridView1.ClientID%>'; 
    function ChangeBg() 
    { 
        var d; 
        var obj = document.getElementById(gdv).getElementsByTagName("tr"); 
        for(var i=0; i <obj.length; i++) 
        { 
            obj[i].onclick=function() 
            { 
                d = d == "#cccccc" ? "#ffffff" : "#cccccc"; //我不知道你使用的是什么灰色。。
                this.style.backgroundColor = d; 
            } 
        } 
    } if(window.attachEvent) 
        window.attachEvent("onload",ChangeBg); 
    </script> 
    <body> 
    <form runat="server"> 
    这里放GridView控件,假设ID是GridView1 
    </form> 
    </body> 
    </html>
      

  15.   

    哎呀呀，原来是交替变换颜色呀，哇咔咔看来只有拿出法宝了加一个tr的样式就OK，不用js了
    <style type="text/css">
        tr{ryo:expression(onclick=function(){this.style.backgroundColor=(this.style.backgroundColor=='#cccccc'?((this.rowIndex%2==0)?"whitesmoke":"white"):'#cccccc')})}
    </style>
      

  16.   

    我说Kingya2008，，你发个样式出来又不告诉我把这个样式加在哪里晕。
      

  17.   

    我服了，你。我。无语了就加在gridview的前台页面<head></head>之间，我真的没有语言，这个都不知道还搞啥子搞？？？
      

  18.   

    前台 jsvar   OldRowBgColor; 
    var   NewRowBgColor=""; //鼠标滑过的颜色
    var   MarkRowBgColor="yellow"; //鼠标点下的颜色
    function   ChangeRowBg(row) 
    { 
        if(event.type== 'mouseover') 
        { 
        OldRowBgColor   =   row.style.backgroundColor 
        row.style.backgroundColor   =   NewRowBgColor 
        } 
        else   if   (event.type== 'mouseout') 
        { 
            row.style.backgroundColor   =   OldRowBgColor; 
        } 
    } 
    function   ChangeRowBgEven(row) 
    { 
        if   (event.type== 'mousedown') 
        { 
            if   (row.style.backgroundColor   !=   MarkRowBgColor) 
            { 
                row.style.backgroundColor   =   MarkRowBgColor; 
                row.onmouseout   =   function(){return   false;} 
                row.onmouseover=   function(){return   false;} 
            } 
            else 
            { 
                row.style.backgroundColor= ''; 
            } 
        } 
    } 
    function   ChangeRowBgImpair(row) 
    { 
        if   (event.type== 'mousedown') 
        { 
            if   (row.style.backgroundColor!= MarkRowBgColor) 
            { 
                row.style.backgroundColor   =   MarkRowBgColor; 
                row.onmouseout   =   function(){return   false;} 
                row.onmouseover=   function(){return   false;} 
            } 
            else 
            { 
                row.style.backgroundColor = NewRowBgColor; 
            } 
        } 
    } 后台：
    private static void ChangeRowBg(GridView grdTable)
        {
            for (int i = 0; i < grdTable.Rows.Count; i++)
            {
                grdTable.Rows[i].Attributes.Add("onmouseover ", "ChangeRowBg(this) ");
                grdTable.Rows[i].Attributes.Add("onmouseout ", "ChangeRowBg(this) ");
                if (i % 2 == 0)
                    grdTable.Rows[i].Attributes.Add("onmousedown ", "ChangeRowBgEven(this) ");
                else
                    grdTable.Rows[i].Attributes.Add("onmousedown ", "ChangeRowBgImpair(this) ");
            }
        }  
    这样调用： ChangeRowBg(this.rscountGridView);
               ChangeRowBg(this.rsredGridView);
      

  19.   

    3楼的方法 加SKIN就不能用了，其他的方法加在UPDATEPANEL里面一样经过重载GRIDVIEW也用不上呵呵
      

  20.   


    谢谢Cutbug,这是我之前希望达到的一个效果.