如何將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請求提交。