BootStrap 动态表单效果

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 动态表单效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

# bootstrap # 动态表单 # Bootstrap 表单验证formValidation 实现表单动态验证功能 # bootstrap table之通用方法（时间控件 # 导出 # 动态下拉框 # 表单验证 # 选中与获取信息）代码分享 # 使用bootstrapValidator插件进行动态添加表单元素并校验 # 小编 # 在此 # 给大家 # 表单 # 所述 # 给我留言 # 感谢大家 # 疑问请 # 有任何 # ID # merchantIds # button # btn # type # path # input # names # placeholder # cssClass # plugins

返回目录在线咨询

上一篇：Golang如何使用strings.Join连接字符串_Golang strings字符串拼接方法
下一篇：东莞网络营销推广：策略与实战解析

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

BootStrap 动态表单效果

您的项目需求