使用jquery動態添加彈簧表單的行

有人可以幫我解決以下問題嗎？我爲我的項目使用spring，並且我有一個jsp頁面，其中有一個表格，第一行從控制器加載。該表還有一個「添加行」按鈕，用戶可以在提交表單之前添加多行以添加更多記錄。會發生什麼事是我使用AutopopulatingList，因此在提交每一行時要作爲控制器中的單獨對象進行處理。我的問題是添加按鈕。我使用JQuery來動態添加行。但克隆選項不適合（我認爲糾正我，如果我錯了），因爲我無法處理列表的索引。我用了以下，但沒有任何作品。使用jquery動態添加彈簧表單的行

<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> 
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%> 
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring" %> 

<%@page contentType="text/html" pageEncoding="UTF-8"%> 
<!DOCTYPE html> 
<html> 
<head> 
    <link href="styles.css" rel="stylesheet" type="text/css"> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <title>Addcolsinviews Add</title> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script> 
    <script type="text/javascript" src="../js/jquery.dataTables.min.js"></script> 
    <script type="text/javascript" src="../js/jquery.validate.min.js"></script> 

    <script type="text/javascript"> 
     $(document).ready(function() { 

$("#addStudentButton").click(function() { 

      $('#dataTable tbody>tr:last').clone(true).insertAfter('#dataTable tbody>tr:last');  
      return false; 

}); 
}); 
</script> 

    </head> 
<body> 
    <%@include file="header.jsp" %> 
    </div> 
    <div class="main"> 
     <%@include file="tableslist.jsp" %> 
     <div class="content"> 
      <div class="subtitle">ADDCOLSINVIEWS ADD</div> 

    <form:form method="POST" name="addcolsForm" id="addcolsForm" commandName="addcolsinviewsadd"> 
     <table id="dataTable"> 
      <thead> 
        <tr margin-top="10px"> 
         <th>Target View</th> 
         <th>Target Column</th> 
         <th>Source View</th> 
         <th>Source Column</th> 
         <th>Actions</th> 
        </tr> 
       </thead> 
       <tbody> 
        <tr id="rowToClone">       
        <td> 
          <spring:bind path="addcolsinviewsadd.addcolsinviews[0].targetview"> 
           <form:input path="${status.expression}"/>        
          </spring:bind></td>    
         <td> 
          <spring:bind path="addcolsinviewsadd.addcolsinviews[0].targetcol"> 
           <form:input path="${status.expression}"/> 
          </spring:bind></td>  
         <td> 
          <spring:bind path="addcolsinviewsadd.addcolsinviews[0].sourceview"> 
           <form:input path="${status.expression}"/> 
          </spring:bind></td> 
         <td> 
          <spring:bind path="addcolsinviewsadd.addcolsinviews[0].sourcecol"> 
           <form:input path="${status.expression}"/> 
          </spring:bind></td> 
         <td><input type="button" id="addStudentButton" value="Add"/></td> 

        </tr>       
      </tbody> 
      </table>     
      <input id="actionbtn" type="submit" value="Process">    
</form:form> 
      </div> 
     </div>     
</body> 
</html>

和第二次試驗是jquery的部分如下：

<SCRIPT language="javascript">  

    $(document).ready(function() { 

var incrementVar = 0; 
$("#addStudentButton").click(function() { 
    incrementVar++; 
      var appendTxt = "<tr>"; 
     appendTxt = appendTxt +      
      "<td><spring\:bind path=\"addcolsinviewsadd.addcolsinviews[" + incrementVar + "].targetview\">"; 
      appendTxt = appendTxt + 
      "<form\:input path=\"${status.expression}\"/>"; 
      appendTxt = appendTxt + 
      "</spring\:bind></td>";     

      appendTxt = appendTxt +      
      "<td><spring\:bind path=\"addcolsinviewsadd.addcolsinviews[" + incrementVar + "].targetcol\">"; 
      appendTxt = appendTxt + 
      "<form\:input path=\"${status.expression}\"/>"; 
      appendTxt = appendTxt + 
      "</spring\:bind></td>"; 

      appendTxt = appendTxt +      
      "<td><spring\:bind path=\"addcolsinviewsadd.addcolsinviews[" + incrementVar + "].sourceview\">"; 
      appendTxt = appendTxt + 
      "<form\:input path=\"${status.expression}\"/>"; 
      appendTxt = appendTxt + 
      "</spring\:bind></td>"; 

      appendTxt = appendTxt +      
      "<td><spring\:bind path=\"addcolsinviewsadd.addcolsinviews[" + incrementVar + "].sourcecol\">"; 
      appendTxt = appendTxt + 
      "<form\:input path=\"${status.expression}\"/>"; 
      appendTxt = appendTxt + 
      "</spring\:bind></td></tr>"; 
    alert(appendTxt); 

$("#dataTable tr:last").after(appendTxt); 

</script>

的問題與上述的是，沒有加入行的。該頁面似乎嘗試添加一個行，但它太小了..我沒有錯誤。在appendTxt的提示中，$ {status.expression}不存在。路徑爲空。我這就是這個問題。有人知道，如果語法是好的，或者如果我可以寫這個別的？

我不知道該怎麼做，我已經搜索了很多..請感謝您的幫助。

來源

2012-07-15 user1516322

爲什麼對一個元素使用2個點擊處理程序？ – undefined 2012-07-15 21:57:42

你是什麼意思2點擊處理程序？我只有添加按鈕的addStudentButton .. – user1516322 2012-07-15 22:40:12

我可以看到其中一個克隆，其中一個附加數據，這可以使兩者之間發生衝突。 – undefined 2012-07-15 23:10:24