我来帮你解决这两个问题，都是前端和ASP.NET交互里常见的场景👇

问题1：如何在JavaScript的onclick事件中获取调用元素的ID？ #

有几种简单直接的实现方式，看你习惯哪种事件绑定方式：

• 方式1：直接传递元素本身
  如果是在HTML标签里直接写onclick属性，可以把this作为参数传给处理函数，这样函数里就能直接拿到触发事件的元素：

  <button id="submitBtn" onclick="handleClick(this)">提交</button>
  

  对应的JS函数：

  function handleClick(element) {
    const id = element.id;
    console.log(`触发点击的元素ID是：${id}`);
    // 这里可以继续用这个元素做其他操作
  }
  

• 方式2：通过事件对象获取目标
  要是用事件监听的方式绑定，或者想通过event对象来获取，也很方便：

  <button id="resetBtn">重置</button>
  

  document.getElementById('resetBtn').addEventListener('click', function(e) {
    const id = e.target.id;
    console.log(`触发点击的元素ID是：${id}`);
  });
  

  当然也可以在HTML属性里传递event参数：

  <button id="deleteBtn" onclick="handleClick(event)">删除</button>
  

  function handleClick(e) {
    const id = e.target.id;
    console.log(`触发点击的元素ID是：${id}`);
  }
  

问题2：定位GridView中绑定了onclick事件的行并修改CSS类 #

从你给出的后台代码片段来看，你是在RowDataBound事件里处理行的绑定逻辑，那我们可以直接在这里给行绑定点击事件时传递行的引用，或者用事件委托的方式来定位行，两种方法都很实用：

方法1：后台绑定事件时传递行对象 #

在RowDataBound方法里，给数据行添加onclick属性，把前端的行元素（也就是<tr>）作为参数传给JS函数：

protected void vd_gv_RowDataBound(object sender, GridViewRowEventArgs e) 
{
    if (e.Row.RowType == DataControlRowType.DataRow) 
    {
        // 给行绑定点击事件，将当前行元素传递给JS函数
        e.Row.Attributes.Add("onclick", "handleRowClick(this)");
        // 可以先给行设置一个基础类，方便后续样式控制
        e.Row.CssClass = "grid-data-row";
    }
}

然后在JS函数里就能直接拿到这一行，轻松修改CSS类：

function handleRowClick(row) {
    // 可选：移除其他行的激活状态（如果需要单选效果）
    document.querySelectorAll('.grid-data-row.active').forEach(item => {
        item.classList.remove('active');
    });
    // 给当前点击的行添加激活类
    row.classList.add('active');
    
    // 这里继续执行你原来的显示更多信息的逻辑
    showRowDetails(row);
}

方法2：用事件委托统一处理点击 #

如果GridView数据量比较大，给每一行单独绑定事件有点浪费性能，那可以用事件委托的方式，给GridView的容器绑定一个点击事件，然后找到触发点击的行：

<!-- 假设你的GridView有一个CSS类或者ID -->
<asp:GridView ID="vd_gv" runat="server" CssClass="my-grid-view">
    <!-- 你的列定义 -->
</asp:GridView>

// 给GridView容器绑定点击事件
document.querySelector('.my-grid-view').addEventListener('click', function(e) {
    // 找到点击源所在的行（closest会向上查找最近的tr元素）
    const targetRow = e.target.closest('tr');
    // 判断是不是数据行（避免点击表头行）
    if (targetRow && targetRow.classList.contains('grid-data-row')) {
        // 切换激活类（如果需要切换状态的话）
        targetRow.classList.toggle('active');
        // 执行显示详情的逻辑
        showRowDetails(targetRow);
    }
});

这种方式只需要绑定一次事件，不管GridView有多少行都能生效，性能更优。

需要注意的是，GridView渲染后的数据行是HTML的<tr>标签，所以只要拿到这个<tr>元素，就可以用classList来添加、移除或者切换CSS类了。

内容的提问来源于stack exchange，提问作者Agamemnon