ASP.NET Core MVC更新表格行时如何隐藏对应原行

页面包含Equipment、PA、Seizures多个表格，数据取自SQL Server数据库。每行都配有更新、删除按钮，点击更新按钮时，预期隐藏原行并显示对应可编辑行，但目前仅显示了可编辑行，原行未隐藏。所有表格在同一页面，且各元素ID命名不重复。以下是Seizure视图的代码、当前效果及期望效果：

Seizure视图代码 #

<div style="background-color:lightgray; width:25%" class="full-width">
<table>
    <tr>
        <td>
            <table class="table table-bordered table-striped" style="width:75%; background-color:white" cellpadding="5">
                <thead>
                        <tr>
                            <th>#</th>
                            <th>Category</th>
                            <th>Item</th>
                            <th>Qty</th>
                            <th>Value</th>
                            <th><!--Edit--></th>
                            <th><!--Delete--></th>
                        </tr>
                </thead>
                <tbody>
                    <input type="hidden" asp-for="Rqkey"/>
                    <input type="hidden" asp-for="Szkey"/>
                   
                        @{
                            if(Model.Seizures != null)
                            {
                                int rownum = 0;
                                foreach (Seizure sez in Model.Seizures)
                                {
                                    <tr id="@rownum">
                                        <td><!--#--></td>
                                        <td>@sez.Category</td>
                                        <td>@sez.Item</td>
                                        <td>@sez.Qty</td>
                                        <td>@sez.Value</td>
                                        <td><input type="button" value="Update" onclick="showSeizure(@sez.Szkey); hides(@rownum)" /></td>
                                        <td><a asp-action="DeleteSeizure" onclick="return confirm('Are you sure you want to remove @sez.Item?')" asp-route-id="@sez.Szkey">Delete</a></td>
                                    </tr>
                                    <tr style="display:none" id="@sez.Szkey">
                                        <td>
                                            @{
                                                @await Html.PartialAsync("UpdateSeizure", sez)
                                            }
                                        </td>
                                    </tr>
                                    rownum++;
                                }
                            }
                        }
                </tbody>
                
            </table>
        </td>
    </tr>
    <tr style="display:none" id="@Model.Rqkey">
        <td>
            @{
                @await Html.PartialAsync("CreateSeizure", Model)
            }
        </td>
    </tr>
</table>
<input type="button" value="Create Record" onclick="showCreate(@Model.Rqkey)" />
</div>

    <script type="text/javascript">
    function showSeizure(keys){
        document.getElementById(keys).style.display = "contents";
    }

    function hides(rownums){
        document.getElementById(rownums).style.display = "none";
    }

    function showCreate(rqKey) {
        // Fetch the CreateSeizure partial content using AJAX
        fetch('@Url.Action("CreateSeizure")?rqKey=' + rqKey)
            .then(response => response.text())
            .then(data => {
                // Insert the fetched partial view into the modal body
                document.getElementById('modal-body-content').innerHTML = data;
                // Show the modal
                $('#createModal').modal('show');
            });
    }
</script>

当前效果 #

期望效果 #

问题根源在于纯数字ID的兼容性问题，以及函数逻辑可以优化，以下是具体修改步骤：

1. 修正行ID命名并合并点击事件 #

给原行和编辑行的ID添加专属前缀，避免全局ID冲突，同时把两个点击事件合并成一个函数：

@foreach (Seizure sez in Model.Seizures)
{
    <tr id="seizure-row-@rownum">
        <td><!--#--></td>
        <td>@sez.Category</td>
        <td>@sez.Item</td>
        <td>@sez.Qty</td>
        <td>@sez.Value</td>
        <td><input type="button" value="Update" onclick="toggleSeizureEdit('seizure-row-@rownum', 'seizure-edit-@sez.Szkey')" /></td>
        <td><a asp-action="DeleteSeizure" onclick="return confirm('Are you sure you want to remove @sez.Item?')" asp-route-id="@sez.Szkey">Delete</a></td>
    </tr>
    <tr style="display:none" id="seizure-edit-@sez.Szkey">
        <td>
            @await Html.PartialAsync("UpdateSeizure", sez)
        </td>
    </tr>
    rownum++;
}

2. 重写JavaScript函数 #

替换原来的showSeizure和hides函数，用table-row替代contents确保表格布局正常：

function toggleSeizureEdit(rowId, editRowId) {
    // 隐藏原数据行
    const originalRow = document.getElementById(rowId);
    if (originalRow) {
        originalRow.style.display = "none";
    }
    // 显示编辑行
    const editRow = document.getElementById(editRowId);
    if (editRow) {
        editRow.style.display = "table-row";
    }
}

额外说明 #

• 给ID加前缀（如seizure-row-、seizure-edit-）是为了避免和页面上其他表格的ID重复，保证全局唯一性。
• 使用table-row作为显示值，比contents更符合HTML表格的渲染规范，不会导致布局错乱。

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