JavaScript点击span图标触发表格关联元素显隐功能失效问题

• JS执行被语法错误阻断：Razor渲染onclick绑定的事件时，没有给传入的区域名参数加字符串定界符。比如区域名称为“生产车间”，最终生成的前端代码会是 onclick="showEquipements(生产车间)"，浏览器会将“生产车间”识别为未定义变量，点击时直接抛出引用错误，绑定的函数完全不会执行。
• 表格DOM结构不符合HTML规范：你将设备列表的<tr>标签直接嵌套在父级区域行的<tr>内部，属于非法嵌套结构。浏览器解析页面时会自动把这类嵌套的tr从父tr中抽离，直接挂载到table的直属层级，不仅布局错位，还可能导致元素选择器匹配异常。
• 属性选择不匹配语义规范：<tr>标签本身不支持原生name属性，虽然部分浏览器兼容document.getElementsByName的匹配逻辑，但这种写法不属于标准DOM行为，不同环境下容易出现元素匹配不到的问题。

1. 调整表格结构，将所有设备子行作为table的直属子节点，和对应区域行相邻排布，使用data-zone自定义属性绑定关联的区域名称，替代不符合语义的name属性。
2. Razor渲染onclick传参时，给区域名包裹字符串定界符，保证生成的JS函数调用是合法的字符串参数。
3. 优化显隐判断逻辑，避免空字符串判断的兼容问题。

Razor视图部分：

@for (int j = 0; j < Model.InfosZoneCalendrier.Count(); j++)
{
    // 区域主行
    <tr>
        <th scope="row">
            @Model.InfosZoneCalendrier[j].NomZone
            <span class="fas fa-caret-down" style="cursor:pointer" 
                  onclick='showEquipements("@Model.InfosZoneCalendrier[j].NomZone")'>
            </span>
        </th>
        <!-- 预留14个空单元格对齐后续7天双时段的列宽，避免布局错位 -->
        @for (int col = 0; col < 14; col++)
        {
            <td></td>
        }
    </tr>
    // 关联的设备子行，作为table直属节点
    @for (int y = 0; y < Model.InfosZoneCalendrier[j].ListEquipements.Count(); y++)
    {
        <tr class="equip-row" data-zone="@Model.InfosZoneCalendrier[j].NomZone" style="display:none">
            <!-- 跨全部15列宽度展示设备项，保持表格布局整齐 -->
            <td colspan="15" style="color:gray; padding-left:2rem">
                @Model.InfosZoneCalendrier[j].ListEquipements[y]
            </td>
        </tr>
    }
}

对应的JS函数优化：

function showEquipements(zoneName) {
    // 匹配所有关联当前区域的设备行
    const targetRows = document.querySelectorAll(`tr.equip-row[data-zone="${zoneName}"]`);
    targetRows.forEach(row => {
        // 隐藏状态就切换为显示，显示状态就切换为隐藏
        row.style.display = row.style.display === "none" ? "" : "none";
    })
}

注意：如果区域名称本身包含单引号，需要在Razor渲染时对特殊字符做转义，避免生成的JS代码出现引号闭合错误。

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