选中gridview绑定数据表的一行，该行的底色会改变

需求：使用鼠标，选中gridview绑定数据表的一行，该行的底色会改变。

解决方案 »

  1.   


    GridView 72 绝技
      

  2.   

     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");
            }
        }
      

  3.   

    function test(obj)
    {
      var p=obj.parentNode;
      for(i=0;i<p.rows.length;i++)
      {
      p.rows[i].style.backgroundColor="white";
      }
      obj.style.backgroundColor="red";
    }
    </script>
    protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
      {
      if (e.Row.RowType == DataControlRowType.DataRow)
      {
      e.Row.Attributes.Add("onclick","test(this)");
      }
    }
      

  4.   

    使用主题Skin 
    <asp:GridView  runat="server" >
        <SelectedRowStyle BackColor="#FFFFCC" />
    ...
      

  5.   

    用JQuery可以这样<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <link href="CSS/style.css" rel="stylesheet" type="text/css" />
    <script src="JS/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script><html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">    <script type="text/javascript">
            var allID = "";
            function checkJs(IsCheck) {
                allID = ""
                if (IsCheck) {
                    $("#gv_info tr:gt(0)").css("background", "#cfffff");
                    $("#gv_info tr:gt(0)").each(function() {
                        $(this).find(":checkbox").attr("checked", true);
                        allID += $(this).find(":checkbox").val()+",";
                    })
                } else {
                    $("#gv_info tr").css("background", "");
                    $("#gv_info tr:gt(0)").each(function() {
                        $(this).find(":checkbox").attr("checked", false);
                        allID = "";
                    })
                    $("#hdID").val(allID);
                }
            }        $(function() {
                var flag = 0;
                $("#gv_info  tr:gt(0)").click(function() {
                    flag = 0;
                    var thirdRe = "";
                    thirdRe = $(this).find(":checkbox").val() + ",";
                    if ($(this).css("background") == "#cfffff") {
                        $(this).css("background", "");
                        $(this).find(":checkbox").attr("checked", false);
                        allID = allID.replace(thirdRe, '');
                    } else {
                        $(this).css("background", "#cfffff");
                        $(this).find(":checkbox").attr("checked", true);
                        allID += thirdRe;
                    }
                    $("#gv_info tr:gt(0)").each(function() {
                        if ($(this).css("background") != "#cfffff") {
                            flag = flag + 1;
                        }
                    })
                    if (flag == 0) {
                        $("#gv_info tr:eq(0)").find(":checkbox").attr("checked", true);
                    } else {
                        $("#gv_info tr:eq(0)").find(":checkbox").attr("checked", false);
                    }
                    $("#hdID").val(allID);                $("<h2>我的" + flag + "</h2>").appendTo("h1");            })        })
         </script>    <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <div id="div" align="center">
            <asp:HiddenField ID="hdID" runat="Server" />
            <asp:GridView ID="gv_info" runat="server" AutoGenerateColumns="False">
                <Columns>
                    <asp:TemplateField>
                        <HeaderTemplate>
                            <input type='checkbox' id='chkAll' name='chkAll' onclick='checkJs(this.checked);' />
                        </HeaderTemplate>
                        <ItemStyle HorizontalAlign="Center" Width="60px" />
                        <ItemTemplate>
                            <input type="checkbox" id="chkSelect" name="chkSelect" value='<%# Eval("Col")  %>' />
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="id">
                        <ItemTemplate>
                            <asp:Label ID="Label1" Text='<% #Eval("Col") %>' runat="server"></asp:Label>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="name">
                        <ItemTemplate>
                            <asp:Label ID="Label2" Text='<% #Eval("PID") %>' runat="server"></asp:Label>
                        </ItemTemplate>
                    </asp:TemplateField>
                 </Columns>
            </asp:GridView>
         
        </div>
        </form>
    </body>
    </html>using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using System.Data;
    using System.Data.SqlClient;public partial class Default2 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            string constring = "Data Source=.;Initial Catalog=Test;User ID=sa;Password=";
            SqlConnection con = new SqlConnection(constring);
            string selectstring="SELECT top 10 * FROM  tb";
            SqlDataAdapter sds = new SqlDataAdapter(selectstring, con);
            DataSet ds = new DataSet();
            sds.Fill(ds);
            gv_info.DataSource = ds.Tables[0];
            gv_info.DataBind();
        }
        protected void Button1_Click(object sender, EventArgs e)
        {
            string a = hdID.Value;
        }
    }
      

  6.   

    楼上的都是正解，用jquery或 Gridview72般绝技都能解决。