javascript - Spring MVC 在表单中添加行

Question

我在 jsp 中有表单，并使用 spring:bind 作为输入元素:

<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" />  

我需要它是动态的，所以我添加了一个按钮来添加/删除一行并在单击时调用脚本。为了测试它是否会添加，我只是将其用作标签:

$(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>");

当我单击按钮时没有任何反应，日志上没有错误。当页面加载并且无法再绑定(bind)时是否会发生 Spring 绑定(bind)，或者我做错了？

Answer 1

可以添加独立的添加和删除功能

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"/>