【ASP.NET】3.为GridView每行添加js点击事件

浅浅的花香味﹌ 2022-06-03 02:51 197阅读 0赞

CADD.aspx页面：

首先GridView要定义OnRowDataBound="方法名"

<%-- 3.2 结果清单 --%>
                    <asp:GridView id="gvData" runat="server"  AutoGenerateColumns="false" OnRowDataBound="gvData_RowDataBound" OnRowCommand="gvData_RowCommand"  CellPadding="20" CellSpacing="20"
                        CssClass="gvPaMn01" HeaderStyle-CssClass="gvPaHd01"  RowStyle-CssClass="gvPaIt01"  AlternatingRowStyle-CssClass="gvPaIt02"  PageSize="2">
    			        <AlternatingRowStyle CssClass="gvPaIt02" />
    			        <Columns>
    			            <asp:TemplateField HeaderText="订单号码" SortExpression="ORID"><ItemTemplate><asp:Label ID="lbgORID" runat="server" Text='<%# Bind("ORID") %>'/></ItemTemplate></asp:TemplateField>
    			        </Columns>
    		            <HeaderStyle CssClass="gvPaHd01" />
                        <RowStyle CssClass="gvPaIt01" />
    		        </asp:GridView>

与CADD.aspx对应的CADD.aspx.cs文件：

#region 3.3 表格绑定事件
        /// <summary>
        /// 3.3 表格绑定事件
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        protected void gvData_RowDataBound(object sender, GridViewRowEventArgs e)
        {
            try{
                if (e.Row.RowType == DataControlRowType.DataRow)
                {
                    #region 设置鼠标滑过的颜色
                    //当鼠标放上去的时候,设置新的颜色
                    e.Row.Attributes.Add("onmouseover", "style.color='red'; ");
                    //当鼠标离开的时候,恢复颜色
                    e.Row.Attributes.Add("onmouseout", "style.color='#000000';");
    
                    #endregion //设置鼠标滑过的颜色
                    e.Row.Attributes["style"] = "Cursor:hand";
                    int row_index = e.Row.RowIndex + 1;
                    e.Row.Attributes.Add("onclick", "ClickEvent('" + row_index + "')");
    
                }
            }
            catch (Exception ex)
            {
                throw ex;
            }
        }
        #endregion //3.3 表格绑定事件

CADD.aspx页面里面对应的js如下：

function ClickEvent(row_index) {
                  var grid_view = document.getElementById('<%=gvData.ClientID %>');
                  var rows = grid_view.rows;
                  var CKDM = rows[row_index].cells[0].innerText;//取第一列的值
                  }