在VB中通过OnClick事件更改GridView行背景颜色

服务器端回发实现 #

这种方式会触发页面回发，适合需要同时执行服务器端逻辑的场景。

1. 添加高亮CSS样式 #

在页面的<style>标签或外部样式表中定义高亮类：

.highlight-row {
    background-color: #ffffcc !important; /* 可自定义高亮颜色 */
}

2. 修改后台VB代码 #

更新LnkBtn1_Click事件，找到当前行并设置高亮，同时清除之前选中行的高亮：

Protected Sub LnkBtn1_Click(sender As Object, e As System.EventArgs)
    Dim LnkBtn1 As LinkButton = CType(sender, LinkButton)
    ' 获取点击按钮所在的GridView行
    Dim currentRow As GridViewRow = CType(LnkBtn1.NamingContainer, GridViewRow)
    
    ' 遍历所有行，恢复原有样式并清除高亮
    For Each row As GridViewRow In gdvOrders.Rows
        row.CssClass = If(row.RowIndex Mod 2 = 0, "", "alt")
    Next
    
    ' 为当前行添加高亮样式
    currentRow.CssClass &= " highlight-row"
End Sub

客户端无回发实现 #

这种方式无需页面回发，交互更流畅，适合仅需要视觉高亮的场景。

1. 添加高亮CSS样式 #

同样先定义高亮类：

.highlight-row {
    background-color: #ffffcc !important;
}

2. 给LinkButton绑定客户端点击事件 #

方式一：前台直接设置

修改GridView的TemplateField代码：

<asp:TemplateField HeaderText="Order">
    <ItemTemplate>
        <asp:LinkButton ID="LnkBtn1" onclick="LnkBtn1_Click" runat="server" 
            Text='<%# Eval("ordertext") %>'
            OnClientClick="highlightRow(this);" />
    </ItemTemplate>
</asp:TemplateField>

如果不需要执行服务器端逻辑，可添加return false;阻止回发：OnClientClick="highlightRow(this); return false;"

方式二：后台RowDataBound事件绑定

在后台添加GridView的RowDataBound事件：

Protected Sub gdvOrders_RowDataBound(sender As Object, e As GridViewRowEventArgs)
    If e.Row.RowType = DataControlRowType.DataRow Then
        Dim lnkBtn As LinkButton = CType(e.Row.FindControl("LnkBtn1"), LinkButton)
        lnkBtn.Attributes.Add("onclick", "highlightRow(this);")
    End If
End Sub

3. 添加JavaScript函数 #

在页面的<script>标签中编写客户端高亮逻辑：

function highlightRow(btn) {
    // 获取当前按钮所在的表格行
    const currentRow = btn.closest('tr');
    
    // 清除所有行的高亮样式
    document.querySelectorAll('#gdvOrders tr').forEach(row => {
        row.classList.remove('highlight-row');
    });
    
    // 为当前行添加高亮样式
    currentRow.classList.add('highlight-row');
}

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