Spring MVC在表单中添加行

时间:2017-05-04 02:45:31

标签: javascript jquery spring spring-mvc

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

我需要它是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>");
单击按钮时没有任何反应,日志上没有错误。当页面加载并且不能再绑定或者我做错了时,是否会发生弹簧绑定?

1 个答案:

答案 0 :(得分:1)

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

&#13;
&#13;
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();
}
&#13;
<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"/>
&#13;
&#13;
&#13;