Spring MVC以形式添加行

Question

我在JSP中具有弹簧的形式：绑定输入元素：

<table id="tab_logic">
<thead></thead>
<tbody>
<tr id='addr0'>
    <td>                                                                                
        <spring:bind path="createForm.contractEntitlements[0].entitledQuantity">                                                                            
            <form:input type="number" min="0" max="999" name="entitled_quantity" id="entitled_quantity" path="${status.expression}"/>                                                                       
        </spring:bind>                                                                          
    </td>
</tr>
<tr id='addr1'></tr>
</tbody>
</table>
<input type="button" id="add_row" value="show" />
<input type="button" id="delete_row" value="hide" />  

我需要它是Dyanmic的，因此我添加了一个按钮以添加/删除行并在单击时调用脚本。为了查看它是否会添加我只是用作标签：

$(document).ready(function(){
    var i=1;
   $("#add_row").click(function(){
    $('#addr'+i).html("<td>"+ (i+1) +"</td><td><input name='"+i+"' type='text' /></td>");
    $('#tab_logic').append('<tr id="addr'+(i+1)+'"></tr>');
    i++; 
});
   $("#delete_row").click(function(){
     if(i>1){
         $("#addr"+(i-1)).html('');
         i--;
         }
     });
});

它会相应地添加并删除行，但是当我将行更改为：

时

$('#addr'+i).html("<td>"+ (i+1) +"</td><td><form:input name='"+i+"' type='text' path='createForm.contractEntitlements[1].category' /></td>");

当我单击按钮时，什么都没有发生，日志上没有错误。春季绑定会在页面加载并且无法绑定时发生吗？

Answer 1

您可以为add and Delete

添加独立功能

function add(){
    var row = $("#tab_logic > tbody > tr:first").html(); //You can create your own html here
    $('#tab_logic > tbody ').append('<tr>'+row+'</tr>');
    
}
function removeElm(obj){
        var row =  $('#tab_logic > tbody > tr').length;
    
    if(row <= 1){
        alert("Not possible to delete this row");
        return;
    }
    
    $(obj).parent().parent().remove();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tab_logic">
    <tr id="tr1">        
        <td> <input type="text"/> </td>
        <td> <label onclick="removeElm(this)">Delete</label> </td>
    </tr>
</table>
<input type="button" onclick="add()" value="add me"/>