DataGrid单击一行改变此行背景色

最新推荐文章于 2018-11-14 17:29:46 发布

原创最新推荐文章于 2018-11-14 17:29:46 发布 · 2.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#datagrid #object #javascript #function #html

ASP.NET 专栏收录该内容

4 篇文章

订阅专栏

这篇博客介绍了如何在DataGrid中实现单击一行时改变该行背景色的效果。首先设置DataGrid的AlternatingItemStyle.BackColor属性为‘Beige’，然后在DataGrid的ItemCreated事件中添加JavaScript属性，使每一行具有点击事件。接着提供了一个JavaScript函数SelectNode，当点击某行时，通过遍历所有TR元素，改变行的背景色，被点击行变为#c6ff00，其余行恢复默认颜色。

DataGrid单击一行改变此行背景色

1）将DataGrid控件的AlternatingItemStyle.BackColor属性设置为“Beige”。

2）在DataGrid控件创建项时激发的事件（DataGrid1_ItemCreated(object sender, System.Web.UI.WebControls.DataGridItemEventArgs e)）中添加如下代码：

　private void DataGrid1_ItemCreated(object sender, System.Web.UI.WebControls.DataGridItemEventArgs e)
　{
　　if ( e.Item.ItemIndex > -1 )
　　{
　　　e.Item.Attributes["name"] = "SelectTR";
　　　e.Item.Attributes["onclick"] = "SelectNode(this)";
　　}
　}

3）在HTML代码页中添加JavaScript代码如下：

　function SelectNode(objThis)
　{
　　var objTrs = document.getElementsByTagName("TR");
　　 var j = 0;
　　for(var i = 0; i < objTrs.length - 1; i = i + 2 )
　　{
　　　j = i + 1;
　　　if(objTrs[i].name == "SelectTR" )
　　　　objTrs[i].style.backgroundColor = "Beige";
　　　if ( objTrs[j].name == "SelectTR" )
　　　　objTrs[j].style.backgroundColor = "#ffffff";
　　}