[ASP.NET] [JS] GridView点击高亮当前选择行,并在点击另一行时恢复上一选择行背景颜色

在ASP.NET中的gridview控件里面可以通过设定其OnRowDataBound事件来进行实现高亮当前行的操作

 

前端控件的设置:

只要设置好OnRowDataBound属性即可,会自动在.cs文件中生成对应的方法

<asp:GridView ID="ufTable" runat="server" AutoGenerateColumns="False" AllowSorting="True"
            CssClass="GridViewStyle" EmptyDataText="表目前為空" OnRowDataBound="ufTable_RowDataBound">

 

后台方法的实现:

执行之前一定要先进行判断是否属于datarow类型的行,否则会出错

1 protected void ufTable_RowDataBound(object sender, GridViewRowEventArgs e)
2         {
3             #region 高亮當前行,執行前一定要判斷是否屬於datarow!!
4             if (e.Row.RowType == DataControlRowType.DataRow)//判定当前的行是否属于datarow类型的行
5             {
6                 e.Row.Attributes.Add("onclick ", "showColor(this) ");//用腳本實現,避免上一行顏色沒有還原                  
7             }
8             #endregion            
9         }

 

js代码的实现:

 1 　　　　　//高亮當前行
 2         function showColor(obj) {
 3             var rowindex = obj.rowIndex;
 4             obj.style.backgroundColor = '#ffbb54 ';
 5 
 6             for (var i = 1; i < obj.parentElement.rows.length; i++) {
 7                 if (i != rowindex) {
 8                     obj.parentElement.rows[i].style.backgroundColor = "#ffffff ";
 9                 }
10             }
11         }

 

效果图:

 

 

 

点击第二行,恢复第一行背景颜色