BootStrap 动态表单效果


Posted in Javascript onJune 02, 2017

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

Javascript 相关文章推荐
JS backgroundImage控制
May 19 Javascript
javascript 隐藏/显示指定的区域附HTML元素【legend】用法
Mar 05 Javascript
JS中Iframe之间传值及子页面与父页面应用
Mar 11 Javascript
jQuery的slideToggle方法实例
May 07 Javascript
js获取IP和PcName(IE)在vs中可用
Aug 02 Javascript
完美实现仿QQ空间评论回复特效
May 06 Javascript
Javascript实现div的toggle效果实例分析
Jun 09 Javascript
全面了解JavaScript的数据类型转换
Jul 01 Javascript
JS 动态加载js文件和css文件 同步/异步的两种简单方式
Sep 23 Javascript
写给小白看的JavaScript异步
Nov 29 Javascript
一次Webpack配置文件的分离实战记录
Nov 30 Javascript
vue 自定义右键样式的实例代码
Nov 06 Javascript
socket.io与pm2(cluster)集群搭配的解决方案
Jun 02 #Javascript
angularjs定时任务的设置与清除示例
Jun 02 #Javascript
Node.js v8.0.0正式发布!看看带来了哪些主要新特性
Jun 02 #Javascript
详解在AngularJS的controller外部直接获取$scope
Jun 02 #Javascript
详解angularJs中关于ng-class的三种使用方式说明
Jun 02 #Javascript
vue.js删除动态绑定的radio的指定项
Jun 02 #Javascript
vue.js选中动态绑定的radio的指定项
Jun 02 #Javascript
You might like
php str_pad 函数用法简介
2009/07/11 PHP
PHP编程中的常见漏洞和代码实例
2014/08/06 PHP
CI框架(CodeIgniter)实现的导入、导出数据操作示例
2018/05/24 PHP
在Javascript里访问SharePoint列表数据的实现方法
2011/05/22 Javascript
Javascript中的Array数组对象详谈
2014/03/03 Javascript
JavaScript实现把rgb颜色转换成16进制颜色的方法
2015/06/01 Javascript
jquery实现华丽的可折角广告代码
2015/09/02 Javascript
JS处理json日期格式化问题
2015/10/01 Javascript
客户端验证用户名和密码的方法详解
2016/06/16 Javascript
jQuery制作网页版选项卡
2016/07/28 Javascript
HTML5 实现的一个俄罗斯方块实例代码
2016/09/19 Javascript
原生JavaScript制作计算器
2016/10/16 Javascript
jQuery实现的淡入淡出图片轮播效果示例
2018/08/29 jQuery
Vue中的Props(不可变状态)
2018/09/29 Javascript
vue.js引入外部CSS样式和外部JS文件的方法
2019/01/06 Javascript
Javascript实现贪吃蛇小游戏(含详细注释)
2020/10/23 Javascript
小程序实现密码输入框
2020/11/16 Javascript
javascript实现滚轮轮播图片
2020/12/13 Javascript
[01:09]DOTA2次级职业联赛 - ishow.HMM战队宣传片
2014/12/01 DOTA
python 正则式 概述及常用字符
2009/05/07 Python
详解Python中的条件判断语句
2015/05/14 Python
对pandas中to_dict的用法详解
2018/06/05 Python
Django教程笔记之中间件middleware详解
2018/08/01 Python
Python利用heapq实现一个优先级队列的方法
2019/02/03 Python
详细介绍pandas的DataFrame的append方法使用
2019/07/31 Python
python 中xpath爬虫实例详解
2019/08/26 Python
全球最大的网上自行车商店:Chain Reaction Cycles
2016/12/02 全球购物
New Balance加拿大官方网站:运动鞋和健身服装
2018/11/19 全球购物
中国制造网:Made-in-China.com
2019/10/25 全球购物
文字自荐书范文
2014/02/10 职场文书
小学毕业感言500字
2014/02/28 职场文书
人力资源部经理助理岗位职责
2014/03/04 职场文书
团代会主持词
2014/04/02 职场文书
2014年最新大专生职业生涯规划书范文
2014/09/13 职场文书
计算机考试作弊检讨书1000字
2015/01/01 职场文书
Python机器学习之KNN近邻算法
2021/05/14 Python