当前位置： 移动技术网 > IT编程>开发语言>JavaScript > BootStrap 动态表单效果

BootStrap 动态表单效果

2017年12月12日  | 移动技术网IT编程  | 我要评论

html部分

     <!-- 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>

js部分

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

效果图

动态表单效果图 

以上所述是小编给大家介绍的bootstrap 动态表单效果，希望对大家有所帮助

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网