上一次说到了基于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. NEXYS 3开发板练手--LED与数码管时钟

    做科研的时候从学校拿到一块基于Xilinx公司Spartan-6主芯片的FPGA开发板,因为之前一直在用Altera公司的FPGA,一开始接触它还真有点不太习惯.但毕竟核心的东西还是不会变的,于是按照 ...

  2. [svc][op]vim自动添加注释

    我想了下,要做好一件事, 1,首先喜欢它最才有动机去了解它 2,道听途说about那东西的,会去了解并去玩转 3,兴趣需要培养 一 添加vim头部信息. 系统:C67 追加以下代码到 /etc/vim ...

  3. cocos2d-x 父节点和子节点执行不同动作

    Test6::Test6() { CCSprite* sp1 = CCSprite::create(s_pPathSister1); CCSprite* sp11 = CCSprite::create ...

  4. JSP版LCX：端口转发神器 KPortTran

    最近接触内网很多,渗透过程中,由于windows和linux的差别以及运行语言环境的限制导致端口转发经常出现问题.于是自己写了个简单的JSP的端口转发脚本.仿造LCX的功能,具有正向.反向.监听三种模 ...

  5. http请求头中的Content-Type属性在angular 和 node中的用法

    post请求的请求体有以下两种格式: 1. 字符串: 'name=code_bunny&age=12' 这种格式的请求体,需要配置请求头 'Content-Type':'application ...

  6. ny488 素数环

    素数环 时间限制:1000 ms  |  内存限制:65535 KB 难度:2 描述 有一个整数n,把从1到n的数字无重复的排列成环,且使每相邻两个数(包括首尾)的和都为素数,称为素数环. 为了简便起 ...

  7. 刷新页面要通过F5

    而不是选中地址栏再按enter键,这样可能产生两种问题: 1.地址栏中的URL可能包括你上次提交的参数,你按了enter之后可能导致上次提交的参数重复提交 2.可能导致根本就没有刷新页面,刚才我修改了 ...

  8. perl 计算方差中值平均数 Statistics::Descriptive;

    http://search.cpan.org/~shlomif/Statistics-Descriptive-3.0612/lib/Statistics/Descriptive.pm use Stat ...

  9. java 关于同步异步的理解

    经常看到介绍 ArrayList 和HashMap是异步,Vector和HashTable是同步,这里同步是线程安全的,异步不是线程安全的,举例说明: 当创建一个Vector对象时候, Vector ...

  10. C语言 · 字符串输入输出函数

    算法提高 3-2字符串输入输出函数   时间限制:1.0s   内存限制:512.0MB      描述 编写函数GetReal和GetString,在main函数中分别调用这两个函数.在读入一个实数 ...