CSS实现表格行hover高亮及点击持久高亮问题（MVC应用）

嘿，刚好帮你解决这个表格行点击持久高亮的问题！你已经搞定了hover的高亮效果，现在只需要一点点JS配合CSS就能实现点击后保持高亮，直到切换到其他行。下面是具体的实现方案，适配你的MVC应用场景：

1. 扩展CSS样式 #

保留你现有的悬停高亮样式，新增一个active类来定义点击后的持久高亮状态——可以和hover样式完全一致，也可以自定义区分：

/* 你原有的鼠标悬停高亮 */
.table-row:hover {
    background-color: #e8f4fd; /* 替换成你实际用的高亮色 */
}

/* 新增的点击激活持久高亮 */
.table-row.active {
    background-color: #e8f4fd; /* 和hover同色保持统一，也可以换其他色 */
    /* 可选：加个边框强化激活状态 */
    border-left: 3px solid #007bff;
}

2. 添加点击事件逻辑 #

因为CSS本身无法持久化点击状态，我们需要用一小段JavaScript来管理active类的添加和移除。在你的MVC视图（比如.cshtml文件）里添加这段代码，确保它在DOM加载完成后执行：

document.addEventListener('DOMContentLoaded', () => {
    // 获取所有表格行（替换成你实际的行类名）
    const tableRows = document.querySelectorAll('.table-row');
    
    tableRows.forEach(row => {
        row.addEventListener('click', () => {
            // 先移除所有行的active类，确保只有一行高亮
            tableRows.forEach(r => r.classList.remove('active'));
            // 给当前点击的行添加active类
            row.classList.add('active');
        });
    });
});

3. MVC视图渲染适配 #

如果你的表格是通过MVC的foreach动态渲染的，还可以设置默认高亮行（比如页面加载时选中第一行）：

<table class="table">
    <thead>
        <tr>
            <th>ID</th>
            <th>名称</th>
            <th>邮箱</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <!-- 给第一行默认添加active类 -->
            <tr class="table-row @(item == Model.FirstOrDefault() ? "active" : "")">
                <td>@item.Id</td>
                <td>@item.Name</td>
                <td>@item.Email</td>
            </tr>
        }
    </tbody>
</table>

关键注意点 #

• 确保你的表格行都使用了统一的类名（比如示例中的.table-row），如果你的类名不同，记得替换成实际的类名
• 如果表格是异步加载的（比如通过AJAX获取数据后渲染），需要在数据加载完成后再执行JS绑定事件的逻辑，或者使用事件委托来处理动态元素

这样就能完美实现：鼠标悬停时行高亮，点击某行后保持高亮状态，点击另一行时自动取消之前的高亮，切换到新行的高亮效果。

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