[已解决问题] GridView点击行变色
提问时间: 2008-05-08 11:12
浏览:3224 次
GridView点击行变色问题，我点击的时候该行可以变色，但是再点击下一行的时候上次点击的没有变回原来的颜色。(鼠标获得和移开变色已经实现，这个目前不需要)。谢谢各位了！
最佳答案
建议用脚本来实现，可以看看 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 时判断 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 还是没有变回原背景色，期待高手！
浏览器的兼容性真是烦人啊！
5/8/2008 2:43:05 PM
回答者：music000
其它回答(3)
|
onclick事件中将当前行的className改变，便在一个全局变量中记录当前行的ID ，
下一次点击另一行时通过那个变量获取上一次选中行 把className改成默认，再将当前行的className改变 你原来应该是在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）的 一旦点击就不行了。 |
|
|
1年前 丁学 : to 金鱼： 看看这个 http://www.cnblogs.com/dingxue/archive/2008/05/19/1202303.html |