html动态添加input

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=GBK"/><metahttp-equiv="X-UA-Compatible"content="IE=EmulateIE7"/><title>html动态添加input</title><styletype="text/css">body{font:12px/1.5tahoma,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:1pxsolid#ccc;margin:2px;}table{border-collapse:collapse;border-spacing:0;}td{margin:0;padding:10px;border:1pxsolid#ccc;}</style><scripttype="text/javascript"src="jquery.min.js"></script><scripttype="text/javascript">$(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和selectname:["demo5","demo5","demo5","demo5"],type:["custom","text","custom","select"],value:["<strongstyle=\"color:#ff7b0e;\">科目：</strong>","","<strongstyle=\"color:#ff7b0e;\">类型：</strong>",{'理论':'1','技能':'2','上机':'3'}],initValue:[["<strongstyle=\"color:#ff7b0e;\">科目：</strong>","初始值5-1","<strongstyle=\"color:#ff7b0e;\">类型：</strong>",{'理论a':'1','技能a':'2','上机a':'3'}],["<strongstyle=\"color:#ff7b0e;\">科目：</strong>","初始值5-1","<strongstyle=\"color:#ff7b0e;\">类型：</strong>",{'理论b':'1','技能b':'2','上机b':'3'}]]});});/***EasyInsert4.0*http://IlikejQuery.com/EasyInsert**@Creatorwo_is神仙<jsw0528@MrZhang.net>*@DependjQuery1.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||{});varoo={remove:"<ahref=\"#nogo\"class=\"remove\">移除</a>",error1:"参数配置错误，数组的长度不一致，请检查。",error2:"参数配置错误，每组初始化值都必须是数组，请检查。"}//容器var$container=$(this);varallowed=true;//把属性拼成数组（这步不知道是否可以优化？）vararrCfg=newArray(o.name,o.type,o.value,o.maxlength,o.className);//arr==>[name,type,value,maxlength,className]vararr=newArray();$.each(arrCfg,function(i,n){if($.isArray(n)){arr[i]=n;}else{arr[i]=newArray();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(){//未添加前的组数varlen=$container.children(o.wrap).length;//定义一个变量，判断是否已经达到上限varisMax=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"://下拉框varoption="";$.each(arr[2][i],function(i,n){option+="<optionvalue='"+n+"'>"+i+"</option>";});$("<select>",{name:arr[0][i],className:arr[4][i]}).append(option).appendTo($Item);break;case"custom"://自定义内容，支持html$Item.append(arr[2][i]);break;default://默认是input$("<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();}//取消“移除”按钮的默认动作returnfalse;});}//取消触发器的默认动作returnfalse;});//初始化if($.isArray(o.initValue)){//判断初始值是否是数组（必需的）$.each(o.initValue,function(i,n){if(!$.isArray(n)){$container.empty().text(oo.error2);returnfalse;}else{if(n.length!==arr[0].length){$container.empty().text(oo.error1);returnfalse;}}vararrValue=newArray();//初始值替换默认值$.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);</script></head><body><tablewidth="90%"align="center"><tr><tdwidth="10%"align="right"><strong>Demo1</strong></td><tdwidth="90%"><ulid="demo1"></ul><ahref="#">+添加</a></td></tr><tr><tdalign="right"><strong>Demo2</strong></td><td><ulid="demo2"></ul><ahref="#">+添加（最多5项）</a></td></tr><tr><tdalign="right"><strong>Demo3</strong></td><td><ulid="demo3"></ul><ahref="#">+添加（最多2项）</a></td></tr><tr><tdalign="right"><strong>Demo4</strong></td><td><ulid="demo4"></ul><ahref="#">+添加</a></td></tr><tr><tdalign="right"><strong>Demo5</strong><supstyle="color:#F00;">NEW</sup></td><td><ulid="demo5"></ul><ahref="#">+添加</a></td></tr></table></body></html>

下载地址：

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