jquery - 使用 onclick 按钮和 id 在 MVC 视图中显示/隐藏特定表行

Question

如果我点击那里的编辑按钮，我想在我的表格中显示一行来编辑上面一行中的对象。该表如下所示：

   <table id="Table">
                <thead>
                    <tr>
                        <th>@Html.Label("Name", "Name")</th>
                        <th>@Html.Label("ID", "ID")</th>
                            <th>@Html.Label("OtherFields", "Other fields")</th>
                        <th></th>
                        <th></th>
                    </tr>
                </thead>
                @for (int i = 0; i < Model.models.Count(); i++)
                {<tr>
                    @Html.Hidden("Name", @Model.Name)</td>
                    <td>@Html.Label("ID", @Model.ID)</td>
                    <td>@Html.Label("OtherFields", @Model.OtherFields)</td>
                     <td> <button type="button"name="ShowEditButton" value="@i" id="EditButton" onclick="ShowEdit(@i)">Edit</button>
                    </td>
                    <td>
                        <button name="deleteButton" value="@i" class="formbutton" id="DeleteButton" onclick="DoNotPrompt()">Delete</button></td>
                </tr>
                    <tr id="Details(@i)" style="display:none;">
                        <td colspan="4">..........</td>
                        <td>
                            <button name="acceptButton" value="@i" class="formbutton" id="AcceptButton" onclick="SaveEdit(@i)">Accept</button></td>
                    </tr> }
            </table>

我的jQuery方法是

        function ShowEdit(i) {
        $('#Details('+i+')').style.display = 'table-row';
    }

我也尝试hidden:"hidden"在行和show()Javascript 中使用它。我也用调试器检查了它并调用了该方法，但它没有向我显示任何内容。在我的应用程序中，包含数据的行要大得多，并导致几个一对多的关系和查找表，在显示的行中编辑它会变得非常混乱。因此，我想让用户有机会在信息下方的行中对其进行编辑。然后AcceptButton将其发送到服务器。有谁能够帮我？难道我尝试做的事情不可能吗？

问题已解决：我必须从ids 中删除括号并将其替换_为使其运行

Answer 1

不确定，但您没有调用所需的函数：

1. onclick="ShowEdit(@i)"
2. onclick="DoNotPrompt()"
3. onclick="SaveEdit(@i)"

你的功能是"ShowMutationEdit()"：

function ShowMutationEdit(i) {
    $('#MutationDetails('+i+')').style.display = 'table-row';
}

刚刚看到你的更新：

In my application the row with the data is much bigger因此，您正在为每个按钮使用 ID，因为它处于循环状态，并且 id 属性有很多重复项。

function ShowEdit(i) {
    $('#Details('+i+')')[0].style.display = 'table-row';
}//---------------------^^^--------------------try adding this

和这个：

function ShowEdit(i) {
    $('#Details('+i+')').show();
}//---------------------^^^^^^^--------------------try adding this