html动态添加input

 html动态添加input

公司主营业务：成都网站制作、成都做网站、外贸营销网站建设、移动网站开发等业务。帮助企业客户真正实现互联网宣传，提高企业的竞争能力。创新互联建站是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化，感谢他们对我们的高要求，感谢他们从不同领域给我们带来的挑战，让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。创新互联建站推出孝义免费做网站回馈大家。

 

 

 
 
 
 
 
 
 
body { font:12px/1.5 tahoma, arial, \5b8b\4f53, sans-serif; } 
ul { margin:0; padding:0; list-style:none; } 
a { margin-left:5px; color:#07F; text-decoration:none; } 
a:hover { text-decoration:underline; } 
input { border:1px solid #ccc; margin:2px; } 
table { border-collapse:collapse; border-spacing:0; } 
td { margin:0; padding:10px; border:1px solid #ccc; } 
 
 
 
$(function(){ 
    $("#demo1").easyinsert();//最简单的应用 
    $("#demo2").easyinsert({ 
        name: ["demo2", "demo2"],//可以同时添加两个（或更多），name值相同也必须分开设置，name数组的长度就是每组input的个数。type、value、maxlength、className四种属性，若同组组员的设置一样，可以只设置一次。 
        value: ["默认值2-1", "默认值2-2"],//可以给同组input分别设置默认值 
        maxlength: 15,//每组input的maxlength都一样，无需使用数组 
        className: ["demo2_class1", "demo2_class2"],//不用我解释了吧 
        toplimit: 5,//可以添加组数上限（默认是0，表示无上限），它是总管，so，name相当于小组组长 
        initValue: [//初始化的时候，各input的value就是归它管，必须是数组 
            ["初始值2-1", "初始值2-2"] 
        ] 
    }); 
    $("#demo3").easyinsert({ 
        name: "demo3", 
        toplimit: 2, 
        initValue: [ 
            ["初始值3-1"],//必须是数组，就算每组只有一个input 
            ["初始值3-2"], 
            ["初始值3-3"]//小三儿，别想蒙混过关，总管只允许添加两组 
        ] 
    }); 
    $("#demo4").easyinsert({ 
        name: ["demo4", "demo4", "demo4", "demo4", "demo4", "demo4"], 
        type: ["text", "radio", "password", "checkbox", "file", "button"], 
        value: ["我是text", "我是radio", "我是password", "我是checkbox", "", "我是button"] 
    }); 
    $("#demo5").easyinsert({//type新增custom和select 
        name: ["demo5", "demo5", "demo5", "demo5"], 
        type: ["custom", "text", "custom", "select"], 
        value: ["科目：", "", "类型：", { '理论': '1', '技能': '2', '上机': '3' }], 
        initValue: [ 
            ["科目：", "初始值5-1", "类型：", { '理论a': '1', '技能a': '2', '上机a': '3' }], 
            ["科目：", "初始值5-1", "类型：", { '理论b': '1', '技能b': '2', '上机b': '3' }] 
        ] 
    }); 
}); 
 
/** 
 * EasyInsert 4.0 
 * http://IlikejQuery.com/EasyInsert 
 * 
 * @Creator   wo_is神仙  
 * @Depend    jQuery 1.4+ 
**/ 
 
;(function($){ 
    $.fn.extend({ 
        "easyinsert": function(o){ 
            o = $.extend({ 
                //触发器 
                clicker: null,//根据class（或id）选择，默认.next()获取 
                //父标签 
                wrap: "li", 
                name: "i-text", 
                type: "text", 
                value: "", 
                maxlength: 20, 
                className: "i-text", 
                //新增上限值 
                toplimit: 0,//0表示不限制 
                //初始化值，二维数组 
                initValue: null//用于修改某资料时显示已有的数据 
            }, o || {}); 
            var oo = { 
                remove: "移除", 
                error1: "参数配置错误，数组的长度不一致，请检查。", 
                error2: "参数配置错误，每组初始化值都必须是数组，请检查。" 
            } 
            //容器 
            var $container = $(this); 
            var allowed = true; 
 
            //把属性拼成数组（这步不知道是否可以优化？） 
            var arrCfg = new Array(o.name, o.type, o.value, o.maxlength, o.className); 
            //arr ==> [name, type, value, maxlength, className]  
            var arr = new Array(); 
            $.each(arrCfg, function(i, n){ 
                if ( $.isArray(n) ) { 
                    arr[i] = n; 
                } else { 
                    arr[i] = new Array(); 
                    if ( i === 0 ) { 
                        arr[0].push(n); 
                    }else{ 
                        //补全各属性数组（根据name数组长度） 
                        $.each(arr[0], function() { 
                            arr[i].push(n); 
                        }); 
                    } 
                } 
                //判断各属性数组的长度是否一致 
                if ( arr[i].length !== arr[0].length ) { 
                    allowed = false; 
                    $container.text(oo.error1); 
                } 
            }); 
 
            if ( allowed ) { 
                //获取触发器 
                var $Clicker = !o.clicker ? $container.next() : $(o.clicker); 
                $Clicker.bind("click", function() { 
                    //未添加前的组数 
                    var len = $container.children(o.wrap).length; 
                    //定义一个变量，判断是否已经达到上限 
                    var isMax = o.toplimit === 0 ? false : (len < o.toplimit ? false : true); 
                    if ( !isMax ) {//没有达到上限才允许添加 
                        var $Item = $("<"+ o.wrap +">").appendTo( $container ); 
                        $.each(arr[0], function(i) { 
                            switch ( arr[1][i] ) { 
                                case "select"://下拉框 
                                    var option = ""; 
                                    $.each(arr[2][i], function(i, n) { 
                                        option += ""+ i +""; 
                                    }); 
                                    $("", { 
                                        name: arr[0][i], 
                                        className: arr[4][i] 
                                    }).append( option ).appendTo( $Item ); 
                                    break; 
                                case "custom"://自定义内容，支持html 
                                    $Item.append( arr[2][i] ); 
                                    break; 
                                default://默认是input 
                                    $("", {//jQuery1.4新增方法 
                                        name: arr[0][i], 
                                        type: arr[1][i], 
                                        value: arr[2][i], 
                                        maxlength: arr[3][i], 
                                        className: arr[4][i] 
                                    }).appendTo( $Item ); 
                            } 
                        }); 
                        $Item = $container.children(o.wrap); 
                        //新组数 
                        len = $Item.length; 
                        if ( len > 1 ) { 
                            $Item.last().append(oo.remove); 
                            if ( len === 2 ) {//超过一组时，为第一组添加“移除”按钮 
                                $Item.first().append(oo.remove); 
                            } 
                        } 
                        $Item.find(".remove").click(function(){ 
                            //移除本组 
                            $(this).parent().remove(); 
                            //统计剩下的组数 
                            len = $container.children(o.wrap).length; 
                            if ( len === 1 ) {//只剩一个的时候，把“移除”按钮干掉 
                                $container.find(".remove").remove(); 
                            } 
                            //取消“移除”按钮的默认动作 
                            return false; 
                        }); 
                    } 
                    //取消触发器的默认动作 
                    return false; 
                }); 
                //初始化 
                if ( $.isArray(o.initValue) ) {//判断初始值是否是数组（必需的） 
                    $.each(o.initValue, function(i, n) { 
                        if ( !$.isArray(n) ) { 
                            $container.empty().text(oo.error2); 
                            return false; 
                        }else{ 
                            if ( n.length !== arr[0].length ) { 
                                $container.empty().text(oo.error1); 
                                return false; 
                            } 
                        } 
                        var arrValue = new Array(); 
                        //初始值替换默认值 
                        $.each(n, function(j, m) { 
                            arrValue[j] = arr[2][j] 
                            arr[2][j] = m; 
                        }); 
                        $Clicker.click(); 
                        //默认值替换初始值 
                        $.each(arrValue, function(j, m) { 
                            arr[2][j] = m; 
                        }); 
                        //上面这种[移形换位法]不知道效率怎么样，我想不出别的更好的方法 
                    }); 
                }else{ 
                    $Clicker.click(); 
                } 
            } 
        } 
    }); 
})(jQuery); 
 
 
 
 
 
     
        Demo1 
         
             
            + 添加 
         
     
     
        Demo2 
         
             
            + 添加（最多5项） 
         
     
     
        Demo3 
         
             
            + 添加（最多2项） 
         
     
     
        Demo4 
         
             
            + 添加 
         
     
     
        Demo5 NEW 
         
             
            + 添加 
         
     
 
 
 

 

下载地址：

http://down.51cto.com/data/648996

当前标题：html动态添加input
网站网址：http://bjjierui.cn/article/jjiiig.html