如何使表格整行可点击？Html.ActionLink移至<tr>失效问题

你遇到的问题很典型——直接把@Html.ActionLink放到<tr>元素上是行不通的，原因在于@Html.ActionLink最终会生成一个<a>标签，而HTML规范里（非HTML5的严格模式下），<a>作为行内元素是不能直接包裹<tr>这种块级表格元素的；就算是HTML5允许这种嵌套，MVC生成的<a>标签默认样式也会导致表格结构错乱，最终链接失效。

下面给你两种可行的实现整行点击的方案，推荐第一种，兼容性和语义化都更好：

方案一：JavaScript绑定点击事件（推荐） #

这种方法保持表格结构完全符合规范，通过给<tr>绑定点击事件来触发页面跳转，步骤如下：

1. 先通过Url.Action生成跳转的URL，把它存在<tr>的自定义属性里，同时给行加上鼠标指针样式提示可点击：

@foreach (var member in Model.Memberships)
{
    // 先生成目标URL
    var switchUrl = Url.Action("SwitchMembership", "HomePageSurface", new { membershipNumber = member.MembershipNumber });
    <tr data-url="@switchUrl" style="cursor: pointer;">
        <td>@member.MembershipNumber</td>
        <td>@member.MemberName</td>
        <!-- 其他列内容 -->
    </tr>
}

2. 添加JavaScript代码，给所有带data-url属性的表格行绑定点击事件：

// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
    // 获取所有带跳转URL的表格行
    const clickableRows = document.querySelectorAll('tr[data-url]');
    clickableRows.forEach(row => {
        row.addEventListener('click', function() {
            // 跳转到目标URL
            window.location.href = this.getAttribute('data-url');
        });
    });

    // 如果你行内有其他可点击元素（比如按钮、独立链接），需要阻止事件冒泡，避免触发整行跳转
    const innerLinks = document.querySelectorAll('tr[data-url] a, tr[data-url] button');
    innerLinks.forEach(element => {
        element.addEventListener('click', function(e) {
            e.stopPropagation();
        });
    });
});

方案二：HTML5嵌套<a>标签（兼容性稍差） #

HTML5允许<a>标签包裹块级元素，包括<tr>，但需要把<tr>放到<tbody>里，并且手动设置<a>为块级显示：

@foreach (var member in Model.Memberships)
{
    <tbody>
        <a href="@Url.Action("SwitchMembership", "HomePageSurface", new { membershipNumber = member.MembershipNumber })" 
           style="display: table-row; text-decoration: none; color: inherit;">
            <tr>
                <td>@member.MembershipNumber</td>
                <td>@member.MemberName</td>
                <!-- 其他列内容 -->
            </tr>
        </a>
    </tbody>
}

⚠️ 注意：这种方法在一些旧浏览器（比如IE11及以下）可能会出现渲染异常，而且表格的语义化结构会被打破，所以优先推荐方案一。

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