GridView行单击事件改变行颜色

需求就是GridView单击任意位置时选中鼠标所在行,改变行颜色,单击另一行的时候,恢复上一次选中行的颜色,并使另一行变色.
Ps:是单击变色...不是停留..

15 个解决方案

#1

http://blog.csdn.net/21aspnet/archive/2007/03/25/1540301.aspx

#2

可以使用：

dataGridView1.DefaultCellStyle.SelectionBackColor = Color.Transparent;

dataGridView1.DefaultCellStyle.SelectionForeColor = Color.Red;

#3

顶，
Gridview有什么不会的直接看Gridview72绝技

#4

引用 2 楼 computerfox 的回复:

可以使用：

C# code
dataGridView1.DefaultCellStyle.SelectionBackColor = Color.Transparent;
dataGridView1.DefaultCellStyle.SelectionForeColor = Color.Red;

这个什么东东~~是gridview控件？？？
!@!!!!楼上几位大哥~看清楚再····哎....说了不是onmouseover和onmouseout事件了，是onclick事件，改变颜色。鼠标移开后，该行颜色继续保留，但是单击其他行的时候，上一行颜色回复，其他行变色。。。。。。。72绝技里说的也只是鼠标的onmouseover和onmouseout事件撒！！

#5

<script>

function aaa(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","aaa(this)");

        }

    }

#6

引用 4 楼 shaluo520 的回复:

引用 2 楼 computerfox 的回复:
可以使用：

C# code
dataGridView1.DefaultCellStyle.SelectionBackColor = Color.Transparent;
dataGridView1.DefaultCellStyle.SelectionForeColor = Color.Red;

这个什么东东~~是gridview控件……

这是在winform中的东西，你要的是web中的。呵呵

#7

引用 5 楼 mngzilin 的回复:

JScript code
<script>
function aaa(obj)
{
   var p=obj.parentNode;
   for(i=0;i<p.rows.length;i++)
   {
       p.rows[i].style.backgroundColor="white";
   }
   obj.style.backgroundColor="red"……

正解

#8

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
  {

  if (e.Row.RowIndex != -1)
  {
  e.Row.Attributes.Add("onclick", "tog(this,'" + ApplicationAlert.pstrFirstColor + "')");
  }
  }
var tgs;
  var tmp_background_val;
  function tog(n,flags)
  {

  if (tgs){
  tgs.style.background= tmp_background_val ;
  }

n.style.background = '#D1D5E1' ;
  tmp_background_val=flags;
  tgs=n;
  }
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
        {
             if (e.Row.RowType == DataControlRowType.DataRow)
            {
                e.Row.Attributes.Add("onclick", "OverColor(this);");
            }
        }

function OverColor(element) {
    element.style.backgroundColor = "red";
}

或
e.Row.Attributes.Add("onclick", "test(" + e.Row.RowIndex + ")");
function test(i) {
  var gv = document.getElementById("<%=GridView1.ClientID%>");
  var rowStr = "";
  var myRow = gv.rows(i+1);
}

#9

`````点击颜色变化后，鼠标移开的时候，颜色要保留改变后的颜色.....然后再次单击其他行的时候，其他行变色，原来先前单击的那一行颜色要恢复背景色.....·······为什么没人理解我的需求啊··········！！！！！！

#10

顶下~~~求教~~~！！！~

#11

5楼的代码你试过了？

不符合你的要求吗？

#12

方法很多，下面是其中一个啊

<%@ Page Language="C#" %>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<script runat="server">


  protected void Page_Load(object sender, EventArgs e)

  {


    System.Data.DataTable dt = new System.Data.DataTable();

    System.Data.DataRow dr;

    dt.Columns.Add(new System.Data.DataColumn("学生班级", typeof(System.String)));

    dt.Columns.Add(new System.Data.DataColumn("学生姓名", typeof(System.String)));

    dt.Columns.Add(new System.Data.DataColumn("语文", typeof(System.Decimal)));

    dt.Columns.Add(new System.Data.DataColumn("数学", typeof(System.Decimal)));

    dt.Columns.Add(new System.Data.DataColumn("英语", typeof(System.Decimal)));

    dt.Columns.Add(new System.Data.DataColumn("计算机", typeof(System.Decimal)));


    for (int i = 0; i < 8; i++)

    {

      System.Random rd = new System.Random(Environment.TickCount * i); ;

      dr = dt.NewRow();

      dr[0] = "班级" + i.ToString();

      dr[1] = "【孟子E章】" + i.ToString();

      dr[2] = System.Math.Round(rd.NextDouble() * 100, 0);

      dr[3] = System.Math.Round(rd.NextDouble() * 100, 0);

      dr[4] = System.Math.Round(rd.NextDouble() * 100, 0);

      dr[5] = System.Math.Round(rd.NextDouble() * 100, 0);

      dt.Rows.Add(dr);

    }

    System.Data.DataView dv = new System.Data.DataView(dt);

    GridView1.DataSource = dv;

    GridView1.DataBind();


  }


  protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)

  {

    if (e.Row.RowType == DataControlRowType.DataRow)

    {

      e.Row.Attributes.Add("onclick", "SetColor(this)");

    }

  }

</script>


<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

  <title></title>


  <script type="text/javascript">

    var lastNode = null;

    function SetColor(obj) {

      if (lastNode) {

        lastNode.style.backgroundColor = lastNode.getAttribute("oldColor");

      }

      obj.setAttribute("oldColor", obj.style.backgroundColor);

      obj.style.backgroundColor = "red";

      lastNode = obj;

    }

  

  </script>


</head>

<body>

  <form id="form1" runat="server">

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

  <AlternatingRowStyle BackColor="Green" />

  <RowStyle BackColor="Olive" />

  </asp:GridView>

  </form>

</body>

</html>

#13

测试2

<%@ Page Language="C#" %>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<script runat="server">


  protected void Page_Load(object sender, EventArgs e)

  {


    System.Data.DataTable dt = new System.Data.DataTable();

    System.Data.DataRow dr;

    dt.Columns.Add(new System.Data.DataColumn("学生班级", typeof(System.String)));

    dt.Columns.Add(new System.Data.DataColumn("学生姓名", typeof(System.String)));

    dt.Columns.Add(new System.Data.DataColumn("语文", typeof(System.Decimal)));

    dt.Columns.Add(new System.Data.DataColumn("数学", typeof(System.Decimal)));

    dt.Columns.Add(new System.Data.DataColumn("英语", typeof(System.Decimal)));

    dt.Columns.Add(new System.Data.DataColumn("计算机", typeof(System.Decimal)));


    for (int i = 0; i < 20; i++)

    {

      System.Random rd = new System.Random(Environment.TickCount * i); ;

      dr = dt.NewRow();

      dr[0] = "班级" + i.ToString();

      dr[1] = "【孟子E章】" + i.ToString();

      dr[2] = System.Math.Round(rd.NextDouble() * 100, 0);

      dr[3] = System.Math.Round(rd.NextDouble() * 100, 0);

      dr[4] = System.Math.Round(rd.NextDouble() * 100, 0);

      dr[5] = System.Math.Round(rd.NextDouble() * 100, 0);

      dt.Rows.Add(dr);

    }

    System.Data.DataView dv = new System.Data.DataView(dt);

    GridView1.DataSource = dv;

    GridView1.DataBind();


  }

  String[] testColor = { "#0022FF", "#990987", "#112233", "#223344", "#334455", "#556677", "#997865", "#ee2211", "#FF22FF", "#FFF", "#AA0099" };

  Random rd = new Random();

  protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)

  {

    if (e.Row.RowType == DataControlRowType.DataRow)

    {

      e.Row.Attributes.Add("onclick", "SetColor(this)");

      e.Row.Attributes.Add("style", "background-color:" + testColor[rd.Next(testColor.Length - 1)]);

    }

  }

</script>


<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

  <title></title>


  <script type="text/javascript">

    var lastNode = null;

    function SetColor(obj) {

      if (lastNode) {

        lastNode.style.backgroundColor = lastNode.getAttribute("oldColor");

      }

      obj.setAttribute("oldColor", obj.style.backgroundColor);

      obj.style.backgroundColor = "red";

      lastNode = obj;

    }

  

  </script>


</head>

<body>

  <form id="form1" runat="server">

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

  </asp:GridView>

  </form>

</body>

</html>

#14

方法2，直接在GridView1上绑定事件

<%@ Page Language="C#" %>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<script runat="server">


  protected void Page_Load(object sender, EventArgs e)

  {


    System.Data.DataTable dt = new System.Data.DataTable();

    System.Data.DataRow dr;

    dt.Columns.Add(new System.Data.DataColumn("学生班级", typeof(System.String)));

    dt.Columns.Add(new System.Data.DataColumn("学生姓名", typeof(System.String)));

    dt.Columns.Add(new System.Data.DataColumn("语文", typeof(System.Decimal)));

    dt.Columns.Add(new System.Data.DataColumn("数学", typeof(System.Decimal)));

    dt.Columns.Add(new System.Data.DataColumn("英语", typeof(System.Decimal)));

    dt.Columns.Add(new System.Data.DataColumn("计算机", typeof(System.Decimal)));


    for (int i = 0; i < 20; i++)

    {

      System.Random rd = new System.Random(Environment.TickCount * i); ;

      dr = dt.NewRow();

      dr[0] = "班级" + i.ToString();

      dr[1] = "【孟子E章】" + i.ToString();

      dr[2] = System.Math.Round(rd.NextDouble() * 100, 0);

      dr[3] = System.Math.Round(rd.NextDouble() * 100, 0);

      dr[4] = System.Math.Round(rd.NextDouble() * 100, 0);

      dr[5] = System.Math.Round(rd.NextDouble() * 100, 0);

      dt.Rows.Add(dr);

    }

    System.Data.DataView dv = new System.Data.DataView(dt);

    GridView1.DataSource = dv;

    GridView1.DataBind();

    GridView1.Attributes.Add("onclick", "SetColor(event)");


  }

  String[] testColor = { "#0022FF", "#990987", "#112233", "#223344", "#334455", "#556677", "#997865", "#ee2211", "#FFeeFF", "#FFF333", "#AAdd99" };

  Random rd = new Random();

  protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)

  {

    if (e.Row.RowType == DataControlRowType.DataRow)

    {      

      e.Row.Attributes.Add("style", "background-color:" + testColor[rd.Next(testColor.Length - 1)]);

    }

  }

</script>


<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

  <title></title>


  <script type="text/javascript">

    var lastNode = null;

    function SetColor(evt) {

      var obj = window.event ? event.srcElement: evt.target;

      if (obj.tagName != "TR") {

        obj = obj.parentNode;

      }

      if (lastNode) {

        lastNode.style.backgroundColor = lastNode.getAttribute("oldColor");

      }

      obj.setAttribute("oldColor", obj.style.backgroundColor);

      obj.style.backgroundColor = "red";

      lastNode = obj;

    }

  

  </script>


</head>

<body>

  <form id="form1" runat="server">

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

  </asp:GridView>

  </form>

</body>

</html>

#15

GridView的72般绝技

#1