GridView点击行变色 - 博问

[待解决问题] GridView点击行变色

提问时间: 2008-05-08 11:12

离问题结束还有 5 天 22 小时浏览:145 次

GridView点击行变色问题，我点击的时候该行可以变色，但是再点击下一行的时候上次点击的没有变回原来的颜色。(鼠标获得和移开变色已经实现，这个目前不需要)。谢谢各位了！

所有回答(4)

onclick事件中将当前行的className改变，便在一个全局变量中记录当前行的ID ，
下一次点击另一行时通过那个变量获取上一次选中行把className改成默认，再将当前行的className改变

1周前回答者：假正经哥哥 - 菜鸟二级

建议用脚本来实现，可以看看 Gmail 邮箱中选中和取消邮件时背景的改变和恢复。

--------------------------------

onclick 时判断 className ，是某个特定 className 时则还原，否则将特定className加载。

有多行的话先遍历将所有行并加载默认 className，再将选中行加载特定className。

--------------------------------
完整代码：

<%@ 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)
    {
        GridView1.DataSource = DataSet; //数据绑定
        GridView1.DataBind();
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>无标题页</title>
      function SetBGC()
      {
         var style;
         var obj = document.getElementById("GridView1").getElementsByTagName("tr");
         for(var i=0; i<obj.length; i++){
            obj[i].onclick=function(){
               style = this.style.background; //记录当前样式（背景）

               for(var j=0; j<obj.length; j++){
                   obj[j].style.background = "";  //将所有行的样式清空
               }

               this.style.background = style; //还原当前行样式
               this.style.background = this.style.background == "#ff0000" ? "" : "#ff0000"; //调整将当前行样式
            }
         }
      }

      if(window.attachEvent)
         window.attachEvent("onload",SetBGC);

      //or  <body onload="SetBGC();">
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:GridView ID="GridView1" EnableViewState="false" runat="server">
        </asp:GridView>
    </div>
    </form>
</body>
</html>

---------------------------------

再次点击当前行， IE6 下是可以了，但在 FirFox 还是没有变回原背景色，期待高手！
浏览器的兼容性真是烦人啊！

1周前回答者：music000 - 菜鸟二级

你原来应该是在onclick里写过类似这样的代码：
td.style.background="#ff0000";
改成这样：
td.style.background= td.style.background=="#ff0000"?"":"#ff0000";
这样就可以在再次点击时恢复原来的颜色了

1周前回答者：丁学 - 老鸟四级

二楼的做法不错！！

1周前回答者：JackLee - 菜鸟二级

1周前金鱼 :
e.Item.Attributes.Add("onclick","this.style.background = '#eef9fb';this.style.cursor='hand'");

我在数据绑定方法里是这样写，知道这样写不能实现恢复原来的颜色，也用了记变量的办法，可是就是不行。
丁学还在吗？如果大家知道了帮忙解决一下@！

1周前   music000 :
刚写了一个，本机上测试达到了你的要求，还是贴上代码：

<%@ 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)
    {
        GridView1.DataSource = DataSet; //数据绑定
        GridView1.DataBind();
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>无标题页</title>
    <script type="text/javascript">
      function SetBGC()
      {
         var obj = document.getElementById("GridView1").getElementsByTagName("tr");
         for(var i=0; i<obj.length; i++){
            obj[i].onclick=function(){
               this.style.background = this.style.background == "#e0ecff" ? "" : "#e0ecff";     //借用一下丁学的代码，我原来写了个 if...else...
            }
         }
      }

      if(window.attachEvent)
         window.attachEvent("onload",SetBGC);

      //or  <body onload="SetBGC();">
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:GridView ID="GridView1" EnableViewState="false" runat="server">
        </asp:GridView>
    </div>
    </form>
</body>
</html>

有个问题，就是Table的头部单击也会变背景色，自己稍微改下吧！（看看源文件的<th></th>）

1周前   music000 :
不好意思，弄错了，没看清你的意思，再改一下：

      function SetBGC()
      {
         var obj = document.getElementById("GridView1").getElementsByTagName("tr");
         for(var i=0; i<obj.length; i++){
            obj[i].onclick=function(){
               for(var j=0; j<obj.length; j++){
                   obj[j].style.background = "";
               }
               this.style.background = this.style.background == "#ff0000" ? "" : "#ff0000";
            }
         }
      }

这次可以了，不好意思啊...

1周前丁学 :
e.Item.Attributes.Add("onclick","this.style.background = '#eef9fb';this.style.cursor='hand'");
把你这行改成下面这样试试：
e.Item.Attributes.Add("onclick","this.style.background = this.style.background=='#eef9fb'?"":'#eef9fb';this.style.cursor='hand'");

1周前丁学 :
错了，引号写错了，是改成下面这样：
e.Item.Attributes.Add("onclick", "this.style.background = this.style.background=='#eef9fb'?'':'#eef9fb'; this.style.cursor='hand'");

1周前   music000 :
上面的脚本还是有点问题：再次点击当前行不会变回原背景色。
再改一次：

      function SetBGC()
      {
         var style;
         var obj = document.getElementById("GridView1").getElementsByTagName("tr");
         for(var i=0; i<obj.length; i++){
            obj[i].onclick=function(){
               style = this.style.background;

               for(var j=0; j<obj.length; j++){
                   obj[j].style.background = "";
               }

               this.style.background = style;
               this.style.background = this.style.background == "#ff0000" ? "" : "#ff0000";
            }
         }
      }

改了之后再次点击当前行， IE6 下是可以了，但在 FirFox 还是没有变回原背景色，期待高手！
浏览器的兼容性真是烦人啊！

1周前金鱼 :
再次感谢 music000 大力帮忙。
同时也感谢丁学的帮忙。

1周前金鱼 :
music000 那个好像对点击改页面控件按钮后只要刷新就不能再点击行选的时候变色了。
我是在GridView中添加了一个模板列（button）的一旦点击就不行了。

您需要登录以后才能回答！

我的问题 我要提问

更多来自金鱼的提问

快到期问题

C#中,关于pdf格式文件转换为多种文件格式
当当网是如何使用ASP.NET实现的?
为什么用enterprise library中的DAAB?
在windows mobile中如何实现单击事件？？？？？？
CalendarExtender能显示时间吗?
如何利用pdfbox或提取pdf文件中的图片或表格
如何动态的生成wcf的binding对象

> 问题排行榜

有不合适内容，建议去除

博问 / 全部问题 / .NET技术 / ASP.NET