RP
项目中有个功能要想实现的效果是这样的，当GridView和数据绑定后，单击某一行时，要让此行的背景色发生改变（不能添加任何查询按钮之类的东西，只是纯绑定），同时让页面上的另外的一个Label.Text的值变为被点击的GridView行中的Row.Cells[1]的数据，如果再点击GridView中的其他行，先前被点击的那行的背景色颜色恢复，Label.Text的值再次与被选中的数据同步。小弟觉得这应该要牵扯到JS，而我的JS实在太弱了，已经好几天了，都没能实现这个效果，望那位高人挺身而出，帮小弟解决一下这个问题啊～ 能否直接就写一个简单的DEMO啊？ （最好是C#版的 Orz）PS:祝各位过年快乐～
项目中有个功能要想实现的效果是这样的，当GridView和数据绑定后，单击某一行时，要让此行的背景色发生改变（不能添加任何查询按钮之类的东西，只是纯绑定），同时让页面上的另外的一个Label.Text的值变为被点击的GridView行中的Row.Cells[1]的数据，如果再点击GridView中的其他行，先前被点击的那行的背景色颜色恢复，Label.Text的值再次与被选中的数据同步。小弟觉得这应该要牵扯到JS，而我的JS实在太弱了，已经好几天了，都没能实现这个效果，望那位高人挺身而出，帮小弟解决一下这个问题啊～ 能否直接就写一个简单的DEMO啊？ （最好是C#版的 Orz）PS:祝各位过年快乐～
function SetBGC()
{
var c;
var d;
var obj = document.getElementById("ctl00_ContentPlaceHolder1_GridView1").getElementsByTagName("tr");
for(var i=1; i<obj.length; i++)
{
obj[i].onmouseover=function()
{
c=this.style.backgroundColor;
d=this.style.backgroundColor;
this.style.backgroundColor='#fffce0'; //鼠标移上
}
obj[i].onmouseout=function()
{
this.style.backgroundColor = c == "#fffddf" ? "#fffddf" : "#ffffff"; //鼠标离开
}
obj[i].onclick=function()
{
d = d == "#fffddf" ? "#ffffff" : "#fffddf"; //调整将当前行背景色
this.style.backgroundColor = d;
c=this.style.backgroundColor;
}
}
} if(window.attachEvent)
window.attachEvent("onload",SetBGC);
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
e.Row.Attributes.Add("onmouseover", "bcl=this.style.backgroundColor;this.style.backgroundColor='#00ffee'");
e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor=bcl;");
e.Row.Attributes.Add("onclick", "js方法");
}
}
e.Row.Attributes.Add("onclick", "selectx(this)");
JS
<script language="javascript" type="text/javascript" >
var prev=null;
function selectx(row) /**//*改变选中行的颜色还原为选中行的颜色*/
{
if(prev!=null)
{
prev.style.backgroundColor='#E4F7D8';
}
row.style.backgroundColor='#8EC26F';
prev=row;
}
</script>
protected void SmartGridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
int i;
//执行循环，保证每条数据都可以更新
for (i = -1; i < SmartGridView1.Rows.Count; i++)
{
//首先判断是否是数据行
if (e.Row.RowType == DataControlRowType.DataRow)
{
//当鼠标停留时更改背景色
e.Row.Attributes.Add("onmouseover", "c=this.style.backgroundColor;this.style.backgroundColor='#00A9FF'");
//当鼠标移开时还原背景色
e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor=c");
}
} }这个是鼠标移动到上面时 换颜色 给你些参考！
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>无标题页</title>
<script language="javascript" type="text/javascript">
var oldRow = null;
window.onload=function()
{
var tblId = "<%=GridView1.ClientID %>";
var tbl = $e(tblId);
if(tbl!=null)
{
for(var i=1;i<tbl.rows.length;i++)
{
tbl.rows[i].onclick=new Function("clickRow(this)")
}
}
}
function clickRow(row)
{
var colorHighlt = "red";
//alert(row.rowIndex);
if(oldRow!=row)
{
if(oldRow!=null)
{
oldRow.style.backgroundColor = "";
}
row.style.backgroundColor = colorHighlt;
}else
{
row.style.backgroundColor=(row.style.backgroundColor==""?colorHighlt:"");
}
var lblId = "<%=Lbl1.ClientID %>";
var lbl = $e(lblId);
lbl.innerText = row.cells(0).innerText;//Label更新为当前行第一列的值
oldRow = row;
}
function $e(id)
{
return document.getElementById(id);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Label ID="Lbl1" runat="server" Text="初始值"></asp:Label>
<asp:GridView runat="server" ID="GridView1" Width="50%">
</asp:GridView>
</div>
</form>
</body>
</html>