Blazor动态表格行点击识别方案咨询：实现任务行展开功能

嗨，这个需求我之前做项目时正好碰到过，给你两个实用的解决方案，分别对应纯C#（Blazor场景）和JS互操作的实现方式，你可以根据自己的技术栈来选：

如果是在Blazor项目里，完全可以用组件绑定的思路来搞定，不用依赖JS。核心思路是给每个任务对象加一个控制展开状态的属性，循环渲染时绑定这个状态，点击行时切换状态即可：

1. 首先给你的任务模型加一个布尔属性，用来控制展开状态：

public class TaskItem
{
    public int Id { get; set; }
    public string Summary { get; set; }
    public string Details { get; set; }
    // 新增展开状态属性
    public bool IsExpanded { get; set; } = false;
}

2. 在Blazor组件里循环渲染表格，绑定点击事件和展开状态：

<table class="task-table">
    @foreach (var task in Tasks)
    {
        <!-- 任务摘要行 -->
        <tr @onclick="() => ToggleExpand(task)" style="cursor: pointer;">
            <td>@task.Summary</td>
            <td>@task.Id</td>
        </tr>
        <!-- 任务详情行，根据IsExpanded决定是否显示 -->
        @if (task.IsExpanded)
        {
            <tr>
                <td colspan="2">
                    <div class="task-details">@task.Details</div>
                </td>
            </tr>
        }
    }
</table>

@code {
    List<TaskItem> Tasks { get; set; }

    protected override void OnInitialized()
    {
        // 模拟从后端获取任务数据
        Tasks = new List<TaskItem>
        {
            new TaskItem { Id = 1, Summary = "完成用户认证模块", Details = "需要实现JWT认证、权限拦截..." },
            new TaskItem { Id = 2, Summary = "优化列表加载速度", Details = "添加分页、懒加载，优化数据库查询..." }
        };
    }

    void ToggleExpand(TaskItem task)
    {
        task.IsExpanded = !task.IsExpanded;
    }
}

这种方式完全用C#和Blazor的绑定机制实现，不需要写JS，而且因为是直接操作任务对象的状态，天然就能精准定位到点击的行。

如果是普通的ASP.NET Web Forms、MVC或者后端动态生成HTML的场景，可以用JS事件委托+自定义属性的方式来解决：

1. 后端循环生成表格时，给每一行的<tr>标签加一个自定义属性，比如data-task-id，同时把详情内容放在相邻的隐藏行或者行内的隐藏元素中：

<table id="taskTable">
    @foreach (var task in Tasks)
    {
        <tr class="task-summary-row" data-task-id="@task.Id">
            <td>@task.Summary</td>
            <td>@task.Id</td>
        </tr>
        <tr class="task-details-row" data-task-id="@task.Id" style="display: none;">
            <td colspan="2">@task.Details</td>
        </tr>
    }
</table>

2. 写JS代码，通过事件委托监听表格的点击事件，根据data-task-id找到对应的详情行并切换显示状态：

// 事件委托到表格，监听所有行的点击
document.getElementById('taskTable').addEventListener('click', function(e) {
    const targetRow = e.target.closest('.task-summary-row');
    if (!targetRow) return;

    const taskId = targetRow.getAttribute('data-task-id');
    // 找到对应的详情行
    const detailsRow = document.querySelector(`.task-details-row[data-task-id="${taskId}"]`);
    
    // 切换显示状态
    if (detailsRow.style.display === 'none') {
        detailsRow.style.display = 'table-row';
    } else {
        detailsRow.style.display = 'none';
    }
});

这里用事件委托的原因是，动态生成的元素没法提前绑定事件，委托到父元素（表格）就能监听所有后续生成的行的点击，而且通过data-task-id能精准对应到要展开的详情内容，完全不需要静态ID。

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