在一個專案中，一個實體需要動態新增另外的實體多個，即在新增或者編輯這個實體的時候，需要動態新增輸入框。利用jQuery簡單實現了一下，小有成就感。
<%if(isAdd){%>
  <div class="am-g am-form-group am-margin-top">
<div class="am-u-sm-4 am-u-md-2 am-text-right">
 <span  style="color: red;">*</span>sku屬性值：
</div>
<div class="am-u-sm-6 am-u-md-6">
 <input type="text" name="opts" value="" minlength="2" maxlength="32" placeholder="請輸入sku屬性值名稱" required/>
</div>
<div class="am-u-sm-2 am-u-md-4">
 <button type="button" class="addInput am-btn am-btn-primary am-btn-xs am-margin-top-xs">+</button>
</div>
  </div>
<%}else{%>
   <!--第一個不能刪除，從for中拿出來-->
   <%for(opt in opts!){%>
<%if(optLP.index==1){%>
<div class="am-g am-form-group am-margin-top">
<div class="am-u-sm-4 am-u-md-2 am-text-right">
 <span  style="color: red;">*</span>sku屬性值：
</div>
<div class="am-u-sm-6 am-u-md-6">
 <input type="text" name="opts" value="${opt.name}" minlength="2" maxlength="32" placeholder="請輸入sku屬性值名稱" required/>
</div>
<div class="am-u-sm-2 am-u-md-4">
 <button type="button" class="addInput am-btn am-btn-primary am-btn-xs am-margin-top-xs">+</button>
</div>
</div>
<%}else{%>
<div class="am-g am-form-group am-margin-top">
<div class="am-u-sm-4 am-u-md-2 am-text-right">
 sku屬性值：
</div>
<div class="am-u-sm-6 am-u-md-6">
 <input type="text" name="opts" value="${opt.name}" minlength="2" maxlength="32" placeholder="請輸入sku屬性值名稱" required/>
</div>
<div class="am-u-sm-2 am-u-md-4">
 <button type="button" class="deleteInput am-btn am-btn-primary am-btn-xs am-margin-top-xs">-</button>
</div>
</div>
<%}%>
   <%}%>
<%}%>
<div id="container">
</div>






<script type="text/javascript">
    $(function(){
//動態新增、刪除輸入框的效果
        $(".addInput").click(function(){
            var $container = $("#container");
            var $newDiv = $("<div class='am-g am-form-group am-margin-top'></div>");
            $newDiv.append($("<div class='am-u-sm-4 am-u-md-2 am-text-right'>sku屬性值：</div>"))
                    .append("<div class='am-u-sm-6 am-u-md-6'><input type='text' name='opts' value='' minlength='2' maxlength='32' placeholder='請輸入sku屬性值名稱' required/></div>")
                    .append("<div class='am-u-sm-2 am-u-md-4'><button type='button' class='deleteInput am-btn am-btn-primary am-btn-xs am-margin-top-xs'>-</button></div>");
            $container.append($newDiv);
            //為新新增的這一行的按鈕新增點選事件
            $(".deleteInput").click(function(){
                $(this).parent().parent().remove();
            });
        });
        
        //編輯中本來有的可以刪除
        $(".deleteInput").click(function(){
                $(this).parent().parent().remove();
        });
    });
</script>


另外就是邏輯上注意：編輯的時候不僅要準備本實體：回顯本實體資料，還需要準備與本實體相關聯的這些實體，以迴圈。然後在新增的時候，將這些資料插入關聯的表中，本實體的id肯定是一個欄位。
編輯的時候先刪除原來本實體相關聯的，再插入現在的。