上一次说到了基于Bootstrap使用jQuery实现输入框组input-group的添加与删除 ，初始状态下只有一个输入框组，可以通过点击输入框组的右侧“+”（或自定义的文字）可以在原输入框组的下面产生一个新的输入框组，通过点击输入框组的右侧“-”（或自定义的文字）可以删除当前输入框组。
        但是这样的输入框组还存在的许多不足之处，如问题一：我们在form表单中添加了这样一个输入框组，那么我们提交表单的时候怎么提交输入框输入的内容呢？（此时上回讲到的输入框组的输入框或文本域还未定义name属性）此外，问题二：那假如我希望初始的输入框组中输入框或文本域就有值肿么办？多个输入框组的内容呈现又如何呢？
针对这样的问题，对上一次自定义的输入框组插件进行了一定的修改。对于问题一，为插件添加 field 配置设置；对于问题二，为插件添加 data 配置设置（解决该问题，有点类似采用了递归的思想，当构建出一个输入框组后，通过触发该输入框组的添加功能（添加按钮的点击事件），在当前输入框组下面产生新的输入框组，同理，直到产生与 data 属性传入的数组长度为止，此时不再触发点击事件）
       修改如下：
inputGroup-1.1.js
  1. /**
  2. * Created by DreamBoy on 2016/6/4.
  3. */
  4. /**
  5. * Created by DreamBoy on 2016/4/29.
  6. */
  7. $(function() {
  8. $.fn.initInputGroup = function (options) {
  9. //1.Settings 初始化设置
  10. var c = $.extend({
  11. widget: 'input',
  12. add: "<span class=\"glyphicon glyphicon-plus\"></span>",
  13. del: "<span class=\"glyphicon glyphicon-minus\"></span>",
  14. field: '',
  15. data: []
  16. }, options);
  17. var _this = $(this);
  18. 　　_this.children().remove();
  19. //添加序号为1的输入框组
  20. addInputGroup(1);
  21. /**
  22. * 添加序号为order的输入框组
  23. * @param order 输入框组的序号
  24. * @param data 初始化输入框组中的数据
  25. */
  26. function addInputGroup(order) {
  27. //1.创建输入框组
  28. var inputGroup = $("<div class='input-group' style='margin: 10px 0'></div>");
  29. //2.输入框组的序号
  30. var inputGroupAddon1 = $("<span class='input-group-addon'></span>");
  31. //3.设置输入框组的序号
  32. inputGroupAddon1.html(" " + order + " ");
  33. //4.创建输入框组中的输入控件（input或textarea）
  34. var widget = '', inputGroupAddon2;
  35. if(c.widget == 'textarea') {
  36. widget = $("<textarea class='form-control' style='resize: vertical;'></textarea>");
  37. widget.html(c.data[order - 1]);
  38. inputGroupAddon2 = $("<span class='input-group-addon'></span>");
  39. } else if(c.widget == 'input') {
  40. widget = $("<input class='form-control' type='text'/>");
  41. widget.val(c.data[order - 1]);
  42. inputGroupAddon2 = $("<span class='input-group-btn'></span>");
  43. }
  44. //5.设置表单提交时的字段名
  45. if(c.field.length == 0) {
  46. widget.prop('name', c.widget + 'Data[]');
  47. } else {
  48. widget.prop('name', c.field + '[]');
  49. }
  50. //6.创建输入框组中最后面的操作按钮
  51. var addBtn = $("<button class='btn btn-default' type='button'>" + c.add + "</button>");
  52. addBtn.appendTo(inputGroupAddon2).on('click', function() {
  53. //7.响应删除和添加操作按钮事件
  54. if($(this).html() == c.del) {
  55. $(this).parents('.input-group').remove();
  56. } else if($(this).html() == c.add) {
  57. $(this).html(c.del);
  58. addInputGroup(order+1);
  59. }
  60. //8.重新排序输入框组的序号
  61. resort();
  62. });
  63. inputGroup.append(inputGroupAddon1).append(widget).append(inputGroupAddon2);
  64. _this.append(inputGroup);
  65. if(order + 1 > c.data.length) {
  66. return;
  67. }
  68. addBtn.trigger('click');
  69. }
  70. function resort() {
  71. var child = _this.children();
  72. $.each(child, function(i) {
  73. $(this).find(".input-group-addon").eq(0).html(' ' + (i + 1) + ' ');
  74. });
  75. }
  76. }
  77. });
index-1.1.html
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <title>输入框组——改进版</title>
  8. <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
  9. <!--<link href="assets/font-awesome/css/font-awesome.css" rel="stylesheet" />-->
  10. <!--[if lt IE 9]>
  11. <script src="js/html5shiv.js"></script>
  12. <script src="js/respond.min.js"></script>
  13. <![endif]-->
  14. </head>
  15. <body>
  16. <div class="container">
  17. <div class="input-group-add">
  18. </div>
  19. </div>
  20. <script src="js/jquery-1.11.1.min.js"></script>
  21. <script src="js/bootstrap.min.js"></script>
  22. <script src="inputGroup-1.1.js"></script>
  23. <script>
  24. $(function() {
  25. $('.input-group-add').initInputGroup({
  26. 'widget' : 'input', //输入框组中间的空间类型
  27. /*'add' : '添加',
  28. 'del' : '删除'*/
  29. 'field': 'data',
  30. 'data' : ['haha', 'hello', 'hi', 'dj']
  31. });
  32. });
  33. </script>
  34. </body>
  35. </html>
       此时，在不设置 data 属性或data属性设置为空数组 []，将与原来显示结果无异。设置由于设置了field属性，所以此时输入框或文本框的name属性为field属性的值，如：
       如果没有设置 field 属性的话，默认为 inputData[] 或 textarea[] 对应设置 input 或 textarea控件。
       当设置了 data 属性后，并且 data 不为空数组时，初始化界面后如下：（设置要的数组将 放入 输入框组 中）
       同样能正常使用 “添加”和“输出”功能。
 
https://blog.csdn.net/qq_15096707/article/details/51585758

基于Bootstrap使用jQuery实现输入框组input-group的添加与删除-改进版的更多相关文章

  1. Bootstrap<基础十五> 输入框组

    Bootstrap 支持的另一个特性,输入框组.输入框组扩展自 表单控件.使用输入框组,可以很容易地向基于文本的输入框添加作为前缀和后缀的文本或按钮. 通过向输入域添加前缀和后缀的内容,您可以向用户输 ...

  2. Bootstrap历练实例：输入框组的大小

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  3. 基于Bootstrap的JQuery TreeView树形控件，数据支持json字符串、list集合（MVC5）<二>

    上篇博客给大家介绍了基于Bootstrap的JQuery TreeView树形控件,数据支持json字符串.list集合(MVC5)<一>, 其中的两种方式都显得有些冗余.接着上篇博客继续 ...

  4. 基于bootstrap的jQuery多级列表树插件 treeview

    http://www.cnblogs.com/mfc-itblog/p/5233453.html http://www.htmleaf.com/jQuery/Menu-Navigation/20150 ...

  5. 基于bootstrap的jQuery多级列表树插件

    简要教程 bootstrap-treeview是一款效果非常酷的基于bootstrap的jQuery多级列表树插件.该jQuery插件基于Twitter Bootstrap,以简单和优雅的方式来显示一 ...

  6. Bootstrap 基于Bootstrap和JQuery实现动态打开和关闭tab页

    基于Bootstrap和JQuery实现动态打开和关闭tab页   by:授客 QQ:1033553122 1.   测试环境 JQuery-3.2.1.min.j Bootstrap-3.3.7-d ...

  7. 基于Bootstrap的jQuery开关按钮组合

    Bootstrap是一款由Twitter推出的开源前端开发包,功能非常强大.今天我们要分享的这款jQuery开关按钮组合就是基于Bootstrap框架的,看了按钮的主题样式,也都是Bootstrap的 ...

  8. 从零开始学 Web 之 jQuery（四）元素的创建添加与删除，自定义属性

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  9. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 表单：输入框（Input）

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

随机推荐

  1. 批处理学习笔记3 - 变量声明和goto代替while循环

    批处理中没有while循环,只能用goto代替.下面是代码 @echo off set /a i = 0 :again echo %i% set /a i= %i% + 1 if %i% lss 10 ...

  2. 在ModelSim中添加Xilinx仿真库

    在ModelSim中添加Xilinx仿真库 说明: l ModelSim一定要安装在不带空格的目录下,即不要安装在“Program Files”目录下.如作者是安装在D:\softwares\Mode ...

  3. modelsim常见错误

    1. Error: (vlog-7) Failed to open design unit file "D:/Xilinx/verilog/src/glbl.v" in read ...

  4. Apache2.2配置小结.

    lamp 1.编译安装 2,日志轮循 3,优化 4,排错 4,1 vhost :NameServer 4,2 403:虚拟主机,给目录在主配置文件里添加配置 4.3 首页文件 初始化安装完成后,如果不 ...

  5. Android UI视图效果篇之仿QQ好友列表分组悬浮PinnedHeaderExpandableListView

    楼主是在平板上測试的.图片略微有点大,大家看看效果就好 接下来贴源代码: PinnedHeaderExpandableListView.java 要注意的是 在 onGroupClick方法中pare ...

  6. EXCEL多列名称组合成一列名称

  7. 从INT 到STRING的几种方法

    1.   int sprintf( char *buffer, const char *format [, argument] ... );      <stdio.h>例如: int s ...

  8. IOS UITableView的代理方法详解

    一.UITableViewDataSourc(数据源代理) 1.必须实现的回调方法 返回每个分区的行数 - (NSInteger)tableView:(UITableView *)tableView ...

  9. FireFox火狐不能收藏书签

    这个问题遇到过好几次了,最好还是记一下. 方法有以下几种: 禁用拓展:附加组件管理器. http://tieba.baidu.com/p/3034493996 禁用拓展:tab mix plus. h ...

  10. C语言 · 求指数

    算法训练 5-2求指数   时间限制:1.0s   内存限制:256.0MB      问题描述 已知n和m,打印n^1,n^2,...,n^m.要求用静态变量实现.n^m表示n的m次方.已知n和m, ...