[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类型的行,否则会出错

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

js代码的实现:

 　　　　　//高亮當前行
         function showColor(obj) {
             var rowindex = obj.rowIndex;
             obj.style.backgroundColor = '#ffbb54 ';
 
             for (var i = 1; i < obj.parentElement.rows.length; i++) {
                 if (i != rowindex) {
                     obj.parentElement.rows[i].style.backgroundColor = "#ffffff ";
                 }
             }
         }

效果图:

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