点击Edit按钮仅首行显示下拉列表，如何实现对应行编辑显示？

问题根源 #

你遇到的核心问题是HTML中ID属性必须唯一，但循环代码重复生成了id="lgpartners"、id="Edit"等重复ID。document.getElementById()只会返回页面中第一个匹配该ID的元素，所以无论点击哪行的Edit按钮，都只会触发首行的下拉框显示。

解决方案 #

通过为每行元素生成唯一标识，让JS能精准定位到当前行对应的下拉框和按钮，具体修改如下：

1. 修改Razor视图代码（index.cshtml）

<table id="tblCustomers" class="table table-striped">
    <tbody>
        @foreach (var item in Model.Organisations)
        {
            <!-- 用唯一的HsaId作为每行的标识 -->
            var rowId = item.HsaId;
            <tr data-row-id="@rowId">
                <td>
                    <span>@item.HsaId</span>
                </td>
                <td>
                    <span>@item.OrgsName</span>
                </td>
                <td class="PartnerOrg">
                    <!-- 显示当前值的文本 -->
                    <span class="partner-text">@item.PartnersLgId</span>
                    <!-- 生成唯一ID的下拉框容器，初始隐藏 -->
                    <div id="lgpartners-@rowId" class="lgpartners-container" style="display:none;">
                        <select multiple="multiple">
                            @foreach (var p in Model.Partners)
                            {
                                <!-- 默认选中当前行的PartnersLgId -->
                                <option value="@p.LgId" @(item.PartnersLgId == p.LgId ? "selected" : "")>
                                    @p.LgId
                                </option>
                            }
                        </select>
                    </div>
                </td>
                <td>
                    <!-- 用class替代重复ID，点击时传递行标识 -->
                    <a class="edit-btn" onclick="becomeVisible('@rowId')">Edit</a>
                    <a class="update-btn" style="display:none" data-row-id="@rowId">Update</a>
                    <a class="cancel-btn" style="display:none" onclick="becomeHidden('@rowId')">Cancel</a>
                    <a class="delete-btn" data-row-id="@rowId">Delete</a>
                </td>
            </tr>
        }
    </tbody>
</table>

2. 修改JavaScript代码（javascript.js）

function becomeVisible(rowId) {
    // 显示当前行的下拉框
    const dropdownContainer = document.getElementById(`lgpartners-${rowId}`);
    dropdownContainer.style.display = "block";
    
    // 切换当前行的文本和按钮状态
    const targetRow = document.querySelector(`tr[data-row-id="${rowId}"]`);
    targetRow.querySelector('.partner-text').style.display = "none";
    targetRow.querySelector('.edit-btn').style.display = "none";
    targetRow.querySelector('.update-btn').style.display = "inline";
    targetRow.querySelector('.cancel-btn').style.display = "inline";
}

function becomeHidden(rowId) {
    // 隐藏当前行的下拉框
    const dropdownContainer = document.getElementById(`lgpartners-${rowId}`);
    dropdownContainer.style.display = "none";
    
    // 恢复当前行的文本和按钮状态
    const targetRow = document.querySelector(`tr[data-row-id="${rowId}"]`);
    targetRow.querySelector('.partner-text').style.display = "inline";
    targetRow.querySelector('.edit-btn').style.display = "inline";
    targetRow.querySelector('.update-btn').style.display = "none";
    targetRow.querySelector('.cancel-btn').style.display = "none";
}

修改说明 #

• 唯一标识：利用每行item.HsaId生成唯一的ID（如lgpartners-123），确保每个下拉框容器ID不重复。
• Class替代重复ID：将原来的id="Edit"、id="Update"改为class（.edit-btn、.update-btn），避免ID重复问题。
• 精准定位：点击按钮时传递当前行的rowId，让JS通过唯一ID和data-row-id属性精准定位到目标元素，而不是全局查找。
• 状态切换优化：补充了文本和按钮的状态切换，点击Edit后隐藏原文本和Edit按钮，显示Update/Cancel按钮；Cancel操作则恢复初始状态，提升交互体验。

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