Question

我有一个包含html表的users.jsp页面，所以当我点击编辑按钮时，应该打开一个弹出窗口的数据，这样表单就在另一个文件editDialog.jsp中，我要提交...所以我尝试了很多方法，但我找不到解决方案......

<div>
<table cellpadding="0" cellspacing="0" border="0"
                class="display example" id="example1">
                <thead>
                    <tr>
                        <th>Login</th>
                        <th>Status</th>
                        <th>Created</th>
                        <th>Last Modified</th>
                        <th>Edit</th>
                        <th>Delete</th>
                    </tr>
                </thead>
                <tbody>
                    <c:forEach items="${userList}" var="users" varStatus="loopStatus">
                        <tr id="${users.user_id}">
                            <td>${users.login_name}</td>
                            <td>${users.account_status eq 1 ? "Enable" : "Disable"}</td>
                            <td>${users.created_at}, ${users.created_by}</td>
                            <td>${users.updated_at}, ${users.updated_by}</td>
                            <td><input class="button" type="button" name="updateRows" value='Edit' onclick="editUserData(${users.user_id})" /></td>

                        </tr>
                    </c:forEach>
                </tbody>
            </table>
</div>

editDialog.jsp

因此对话框应仅填充loginId和帐户状态，并且应隐藏userId 和account_status是可编辑的值...我在这里需要帮助....

<div id="editDialog" title="Edit user" style="display: none">
    <form:form action="users.do" method="POST" commandName="users"
        id="editForm">
        <table>
            <thead>
                <tr>
                    <th></th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Name:</td>
                    <td id="loginId"><form:input path="login_name" /></td>
                </tr>
                <tr class="hide">
                    <td>UserId:</td>
                    <td id="userId"><form:input path="user_id" readonly="true" />
                    </td>
                </tr>
                <tr>
                    <td>Status:</td>
                    <td id="statusId"><form:radiobutton path="account_status"
                            value="1" /> Enable <form:radiobutton path="account_status"
                            value="0" /> Disable</td>
                </tr>
                <tr>
                    <td>CsId:</td>
                    <td id="csId"><form:input path="cs_id" readonly="true" /></td>
                </tr>
                <tr class="hide">
                    <td>Created_at:</td>
                    <td id="createdAtId"><form:input path="created_at"
                            readonly="true" /></td>
                </tr>
                <tr class="hide">
                    <td>Created_by:</td>
                    <td id="createdById"><form:input path="created_by"
                            readonly="true" /></td>
                </tr>
                <tr class="hide">
                    <td>Updated_at:</td>
                    <td id="updatedAtId"><form:input path="updated_at"
                            readonly="true" /></td>
                </tr>
                <tr class="hide">
                    <td>Updated_by:</td>
                    <td id="updatedById"><form:input path="updated_by"
                            readonly="true" /></td>
                </tr>
                <tr>
                    <td></td>
                    <td><input type="submit" name="action" value="Edit">
                        <input id="addCancel" type="button" value="Cancel"></td>
                </tr>
            </tbody>
        </table>
    </form:form>
</div>

Answer 1

您可以通过在div中隐藏一个表单来实现这一点，并且每当用户单击编辑按钮时，将必要的信息复制到表单元素，然后将其显示为对话框并允许用户保存/取消它。在保存时，将表单数据作为Ajax请求提交。

如何将html表行数据放入对话框进行编辑

1 个答案: