Question

有人可以帮我解决以下问题吗？我使用spring作为我的项目，我有一个jsp页面，其中有一个表格，其中第一行是从控制器加载的。该表还有一个“添加行”按钮，用户可以在提交表单之前添加多行以添加更多记录。会发生的是我使用AutopopulatingList，因此在提交中每行都要作为控制器中的单独对象进行处理。我的问题是添加按钮。我使用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}不存在。路径为空。我知道这就是问题所在。有人知道语法是否正常，或者我是否可以用别的方式写这个？

我不知道该怎么办，我已经搜索了很多..请感谢你的帮助。

Answer 1

这里有一篇非常有用的文章...... jquery clone form fields and increment id

所以答案是使用clone（）并使用正则表达式来增加索引。上面的链接给出了详细信息和示例。附加一个Spring表单元素将不起作用，因为附加发生在浏览器端，而spring表单元素是在服务器端编译的。浏览器对Spring元素一无所知。

Answer 2

如果您在呈现页面的HTML源代码时检查它，您会发现<\form:input>由于在到达浏览器之前在服务器端进行处理而仅更改为<\input>。

因此，使用jQuery插入form:input将不起作用;您需要以HTML rending形式输入它。查看已经呈现的<\tr>并以相同的格式复制其内容。（即不要使用path=，使用value=，name=等。

使用Jquery动态添加spring表单的行

2 个答案: