如何将html表格的行数据导入对话框进行编辑

Question

我有一个users.jsp页面，其中包含html表格，所以当我点击编辑按钮时，应该用数据打开一个弹出窗口，以便表单在另一个文件中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

所以对话框应填充仅登录ID和账户状态和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请求提交。