BootStrap 动态表单效果

     <!-- The template for adding new field -->     <div class="form-group hide" id="bookTemplate">      <label class="col-sm-3 control-label">承包商</label>      <div class="col-sm-2">       <form:input path="names" cssClass="form-control" name="names" placeholder="名称"/>      </div>      <div class="col-sm-2">       <form:input path="merchantIds" cssClass="form-control" name="merchantIds" placeholder="ID"/>      </div>      <div class="col-sm-2">       <button type="button" class="btn btn-default removeButton"><i class="fa fa-minus"></i>       </button>      </div>     </div>

<script src="${context}/plugins/datatables/jquery.dataTables.min.js"></script> <script src="${context}/plugins/datatables/dataTables.bootstrap.min.js"></script> <script src="${context}/plugins/datatables/dataTables.bootstrap.js"></script> <script src="${context}/js/public.js"></script> <script> $(document).ready(function () {   var index = 0;   $('#form')   // Add button click handler     .on('click', '.addButton', function () {      if (this.name > 0 && index == 0) {       index = this.name;      }      index++;      var $template = $('#bookTemplate'),        $clone = $template          .clone()          .removeClass('hide')          .removeAttr('id')          .attr('data-book-index', index)          .insertBefore($template);      // Update the name attributes      $clone        .find('[name="names"]').attr('path', 'contractor[' + index + '].names').attr('name', 'contractor[' + index + '].names').end()        .find('[name="merchantIds"]').attr('path', 'contractor[' + index + '].merchantIds').attr('name', 'contractor[' + index + '].merchantIds').end();      // Add new fields      // Note that we also pass the validator rules for new field as the third parameter     })     // Remove button click handler     .on('click', '.removeButton', function () {      var $row = $(this).parents('.form-group'),        index = $row.attr('data-book-index');      // Remove fields      // Remove element containing the fields      $row.remove();     });</script>