GridView点击行变色问题,我点击的时候该行可以变色,但是再点击下一行的时候上次点击的没有变回原来的颜色。(鼠标获得和移开变色已经实现,这个目前不需要)。谢谢各位了!
|
onclick事件中将当前行的className改变,便在一个全局变量中记录当前行的ID ,
下一次点击另一行时通过那个变量获取上一次选中行 把className改成默认,再将当前行的className改变 建议用脚本来实现,可以看看 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 还是没有变回原背景色,期待高手! 浏览器的兼容性真是烦人啊! 你原来应该是在onclick里写过类似这样的代码: td.style.background="#ff0000"; 改成这样: td.style.background= td.style.background=="#ff0000"?"":"#ff0000"; 这样就可以在再次点击时恢复原来的颜色了 二楼的做法不错!! |
|
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)的 一旦点击就不行了。 |