Jquery动态添加输入框

zr_hebo 发布于2019-08-01 17:41 / 1967人阅读

摘要：动态添加输入框的两种方法。我总结了一点用添加和删除元素。添加元素例如你需要在中添加元素删除元素第一种情况，删除下面的所有子集，但保留住。

jquery 动态添加输入框的两种方法。

1.展示页面




    
    
    
    动态添加输入框

    
    


    动态添加输入框
    
          第一种组件封装
        
        

        第二种简单的实现方式

二、js方法

add.js

/**
 * Created by DreamBoy on 2016/6/4.
 */
$(function() {
    $.fn.initInputGroup = function (options) {
        //1.Settings 初始化设置
        var c = $.extend({
            widget: "input",
            add: "",
            del: "",
            field: "",
            data: []
        }, options);



        var _this = $(this);

        //添加序号为1的输入框组
        addInputGroup(1);

        /**
         * 添加序号为order的输入框组
         * @param order 输入框组的序号
         * @param data 初始化输入框组中的数据
         */
        function addInputGroup(order) {

            //1.创建输入框组
            var inputGroup = $("");

            //2.输入框组的序号
            var inputGroupAddon1 = $("");

            //3.设置输入框组的序号
            inputGroupAddon1.html(" " + order + " ");

            //4.创建输入框组中的输入控件（input或textarea）
            var widget = "", inputGroupAddon2;
            if(c.widget == "textarea") {
                widget = $("");
                widget.html(c.data[order - 1]);
                inputGroupAddon2 = $("");
            } else if(c.widget == "input") {
                widget = $("  ");
                widget.val(c.data[order - 1]);
                inputGroupAddon2 = $("");
            }

            //5.设置表单提交时的字段名
            if(c.field.length == 0) {
                widget.prop("name", c.widget + "Data[]");
            } else {
                widget.prop("name", c.field + "[]");
            }


            //6.创建输入框组中最后面的操作按钮
            var addBtn = $("");
            addBtn.appendTo(inputGroupAddon2).on("click", function() {
                //7.响应删除和添加操作按钮事件
                if($(this).html() == c.del) {
                    $(this).parents(".input-group").remove();
                } else if($(this).html() == c.add) {
                    $(this).html(c.del);
                    addInputGroup(order+1);
                }
                //8.重新排序输入框组的序号
                resort();
            });

            inputGroup.append().append(widget).append(inputGroupAddon2);

            _this.append(inputGroup);

            if(order + 1 > c.data.length) {
                return;
            }
            addBtn.trigger("click");
        }

        function resort() {
            var child = _this.children();
            $.each(child, function(i) {
                $(this).find(".input-group-addon").eq(0).html(" " + (i + 1) + " ");
            });
        }
    }
});

相关知识汇总：

我用jquery开发我们前端时，我们用js添加和删除元素是不可避免的。
我总结了一点用jquery添加和删除元素。
添加元素：
例如你需要在

中添加元素：

$("#main").append("added
");

删除元素：
第一种情况，删除mian下面的所有子集，但main保留住。

$("#main").empty();

第二种情况，删除main下面的所有子集，包括mian自己。

$("#main").remove();

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/51310.html

12个用得着的JQuery代码片段

摘要：页面部分刷新的特效在中也很容易实现每隔秒钟刷新页面内容获取的内容将增加到为的元素后采用方法来缓存数据在项目中，为了避免多次重复的向服务器请求数据，通常会将获取的数据缓存起来以便后续使用。 1. 导航菜单背景切换效果在项目的前端页面里，相对于其它的导航菜单，激活的导航菜单需要设置不同的背景。这种效果实现的方式有很多种，下面是使用JQuery实现的一种方式：导航一 ...

felix0913 2019-08-21 10:44 评论0 收藏0
javascript功能插件大集合前端常用插件 js常用插件

摘要：转载来源包管理器管理着库，并提供读取和打包它们的工具。能构建更好应用的客户端包管理器。一个整合和的最佳思想，使开发者能快速方便地组织和编写前端代码的下一代包管理器。很棒的组件集合。隐秘地使用和用户数据。转载来源：https://github.com/jobbole/aw... 包管理器管理着 javascript 库，并提供读取和打包它们的工具。•npm – npm 是 javasc...

netmou 2019-08-23 12:28 评论0 收藏0
javascript功能插件大集合前端常用插件 js常用插件

摘要：转载来源包管理器管理着库，并提供读取和打包它们的工具。能构建更好应用的客户端包管理器。一个整合和的最佳思想，使开发者能快速方便地组织和编写前端代码的下一代包管理器。很棒的组件集合。隐秘地使用和用户数据。转载来源：https://github.com/jobbole/aw... 包管理器管理着 javascript 库，并提供读取和打包它们的工具。•npm – npm 是 javasc...

Hydrogen 2019-08-02 11:46 评论0 收藏0
javascript功能插件大集合，写前端的亲们记得收藏

摘要：一个专注于浏览器端和兼容的包管理器。一个整合和的最佳思想，使开发者能快速方便地组织和编写前端代码的下一代包管理器。完全插件化的工具，能在中识别和记录模式。健壮的优雅且功能丰富的模板引擎。完整的经过充分测试和记录数据结构的库。【导读】：GitHub 上有一个 Awesome – XXX 系列的资源整理。awesome-javascript 是 sorrycc 发起维护的 JS 资源列表...

cfanr 2019-08-20 10:34 评论0 收藏0
JavaScript 资源大全中文版

摘要：官网全新的静态包管理器。官网一个整合和官网的最佳思想，使开发者能快速方便地组织和编写前端代码的下一代包管理器。官网小巧的兼容的所见即所得的富文本编辑器。官网富文本编辑器。官网由制作，适用于每天写作的富文本编辑器。 1. 包管理器管理着 javascript 库，并提供读取和打包它们的工具。 npm：npm 是 javascript 的包管理器。官网 cnpm：cnpm 是由于国...

jzman 2019-08-23 17:18 评论0 收藏0