Jquery動態添加輸入框

zr_hebo 發布于2019-08-01 17:41 / 2006人閱讀

摘要：動態添加輸入框的兩種方法。我總結了一點用添加和刪除元素。添加元素例如你需要在中添加元素刪除元素第一種情況，刪除下面的所有子集，但保留住。

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();

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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