【ASP.NET】3.为GridView每行添加js点击事件_gridview行点击事件-优快云博客

本文介绍如何在ASP.NET中使用GridView控件实现数据展示，并通过绑定事件实现行点击交互功能，包括设置鼠标悬停效果及获取点击行的数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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;//取第一列的值
              }