使用JS实现GridView按钮点击无回发切换What Stays列内容

不用改现有后端数据绑定逻辑，纯前端就能实现你要的效果，具体操作如下：

第一步：调整后端RowDataBound事件逻辑 #

你现在用的是服务器端Button控件，默认点击会触发回发，而且自动生成的列没有标识不好定位，直接在现有的MergeInfoGrid_RowDataBound方法里加几行代码就行，不用动aspx里的列定义：

public void MergeInfoGrid_RowDataBound(Object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        e.Row.Attributes.Add("onmouseover", "this.style.backgroundColor='#ceedfc'");
        e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor=''");
        
        // 给对应数据列加样式类，方便JS定位，列索引和你绑定的DataTable顺序对应：
        // 0=Switch按钮列 1=Category 2=Vehicle 1 3=Vehicle 2 4=What Stays
        e.Row.Cells[2].CssClass = "col-v1";
        e.Row.Cells[3].CssClass = "col-v2";
        e.Row.Cells[4].CssClass = "col-what-stays";

        // 给Switch按钮加客户端事件，阻止默认回发行为
        Button switchBtn = (Button)e.Row.FindControl("btnSwitch");
        switchBtn.UseSubmitBehavior = false;
        switchBtn.OnClientClick = "switchRowVal(this);return false;";
    }
}

第二步：添加客户端JS切换逻辑 #

在页面里加一段普通的JavaScript代码，不需要任何第三方依赖：

function switchRowVal(clickBtn) {
    // 定位到按钮所在的当前数据行
    const row = clickBtn.closest('tr');
    // 取当前行两辆车的字段值
    const v1Content = row.querySelector('.col-v1').innerText.trim();
    const v2Content = row.querySelector('.col-v2').innerText.trim();
    const targetCell = row.querySelector('.col-what-stays');
    // 切换What Stays列的值：当前和V1一致就切到V2，否则切到V1
    targetCell.innerText = targetCell.innerText.trim() === v1Content ? v2Content : v1Content;

    // 如果后续需要提交保存选择结果，在这里根据行的分类字段，把值同步到你页面对应的WhatStaysxxx隐藏域即可
}

加完之后直接测试就行，点击Switch按钮全程在客户端运行，不会触发页面刷新回发，What Stays列的内容会自动在同一条记录的两个车辆取值之间切换，原来的鼠标悬停行变色效果也不会受影响。

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