基于ID实现表格行显隐：jQuery功能实现技术求助

没问题，你的思路完全正确——通过按钮ID关联对应表格行来实现切换，只是之前的jQuery代码在选择器和关联逻辑上出了小问题，我来帮你修正：

核心问题分析 #

你原来的$("id").toggle()是错误的写法：

• jQuery的ID选择器需要以#开头，$("id")会被当成标签选择器（寻找<id>标签），根本定位不到目标行
• 没有建立按钮和对应行的关联，不知道点击的按钮要控制哪一行

修正后的完整实现 #

步骤1：修正jQuery代码

$(document).ready(function () {
    // 初始状态先隐藏所有详情行，体验更合理
    $("tr[id]").hide();

    $("button").click(function () {
        // 获取当前点击按钮的ID（和对应详情行的ID一致）
        const targetRowId = $(this).attr("id");
        // 用ID选择器定位目标行，切换显示/隐藏状态
        $("#" + targetRowId).toggle();
    });
});

步骤2：可选优化（避免全局选择冲突）

如果页面上还有其他按钮或带ID的元素，建议给按钮和详情行加统一类名，让选择器更精准：

<!-- 生成HTML时添加类名 -->
@foreach (var item in Model) {
    <tr>
        <td>Dataset@(item.Id) <button id="@(item.Id)" class="toggle-detail-btn">Show more</button></td>
    </tr>
    <tr id="@(item.Id)" class="detail-row">
        <td>Data from Dataset@(item.Id)</td>
    </tr>
}

对应的jQuery代码调整为：

$(document).ready(function () {
    $(".detail-row").hide();
    $(".toggle-detail-btn").click(function () {
        const targetRowId = $(this).attr("id");
        $("#" + targetRowId).toggle();
    });
});

这样修改后，点击"Show more"按钮就能精准切换对应表格行的显示状态了。

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