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 相关文章推荐
prototype class详解
Sep 07 Javascript
Javascript注入技巧
Jun 22 Javascript
js类中获取外部函数名的方法与代码
Sep 12 Javascript
Jquery实现网页跳转或用命令打开指定网页的解决方法
Jul 09 Javascript
javascript判断chrome浏览器的方法
Mar 26 Javascript
JS生成随机字符串的多种方法
Jun 10 Javascript
JavaScript中字符串分割函数split用法实例
Apr 07 Javascript
JavaScript实现点击按钮切换网页背景色的方法
Oct 17 Javascript
微信小程序 this和that详解及简单实例
Feb 13 Javascript
微信小程序 sha1 实现密码加密实例详解
Jul 06 Javascript
JS实现为动态添加的元素增加事件功能示例【基于事件委托】
Mar 21 Javascript
创建nuxt.js项目流程图解
Mar 13 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
杏林同学录(五)
2006/10/09 PHP
百度实时推送api接口应用示例
2014/10/21 PHP
PHP常见错误提示含义解释(实用!值得收藏)
2016/04/25 PHP
ThinkPHP整合datatables实现服务端分页的示例代码
2018/02/10 PHP
实例讲解PHP验证邮箱是否合格
2019/01/28 PHP
js focus不起作用的解决方法(主要是因为dom元素是否加载完成)
2010/11/05 Javascript
javascript 弹出窗口中是否显示地址栏的实现代码
2011/04/14 Javascript
jQuery源码分析之jQuery中的循环技巧详解
2014/09/06 Javascript
node.js中的console.timeEnd方法使用说明
2014/12/09 Javascript
基于jQuery实现选项卡效果
2017/01/04 Javascript
Bootstarp基本模版学习教程
2017/02/01 Javascript
JS实现transform实现扇子效果
2020/01/17 Javascript
JS实现横向跑马灯效果代码
2020/04/20 Javascript
详解vue v-model
2020/08/31 Javascript
[46:20]CHAOS vs Alliacne 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
在Python中操作文件之seek()方法的使用教程
2015/05/24 Python
Python性能提升之延迟初始化
2016/12/04 Python
Pycharm学习教程(1) 定制外观
2017/05/02 Python
Python一键安装全部依赖包的方法
2019/08/12 Python
python 读取更新中的log 或其它文本方式
2019/12/24 Python
pycharm工具连接mysql数据库失败问题
2020/04/01 Python
CSS实现鼠标滑过鼠标点击代码写法
2016/12/26 HTML / CSS
纯CSS3实现图片无间断轮播效果
2016/08/25 HTML / CSS
HTML5 Canvas绘制文本及图片的基础教程
2016/03/14 HTML / CSS
html特殊符号示例 html特殊字符编码对照表
2014/01/14 HTML / CSS
简单的项目建议书模板
2014/03/12 职场文书
老公给老婆的保证书
2014/04/28 职场文书
奥巴马经典演讲稿
2014/09/13 职场文书
名人演讲稿范文
2014/09/16 职场文书
2014年党的群众路线教育实践活动整改措施(个人版)
2014/09/25 职场文书
经理聘任证明
2015/03/02 职场文书
2015年食堂工作总结报告
2015/04/23 职场文书
贴吧吧主申请感言
2015/08/03 职场文书
《怀念母亲》教学反思
2016/02/19 职场文书
mysql left join快速转inner join的过程
2021/06/30 MySQL
星际争霸:毕姥爷vs解冻01
2022/04/01 星际争霸