中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站

溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

html動態添加input

發布時間：2020-06-09 21:51:59 來源：網絡 閱讀：1267 作者：許琴 欄目：web開發

 html動態添加input

 

html動態添加input

 

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=GBK" /> 
  5. <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> 
  6. <title>html動態添加input</title> 
  7. <style type="text/css"> 
  8. body { font:12px/1.5 tahoma, arial, \5b8b\4f53, sans-serif; } 
  9. ul { margin:0; padding:0; list-style:none; } 
  10. a { margin-left:5px; color:#07F; text-decoration:none; } 
  11. a:hover { text-decoration:underline; } 
  12. input { border:1px solid #ccc; margin:2px; } 
  13. table { border-collapse:collapse; border-spacing:0; } 
  14. td { margin:0; padding:10px; border:1px solid #ccc; } 
  15. </style> 
  16. <script type="text/javascript" src="jquery.min.js"></script> 
  17. <script type="text/javascript"> 
  18. $(function(){ 
  19.     $("#demo1").easyinsert();//最簡單的應用 
  20.     $("#demo2").easyinsert({ 
  21.         name: ["demo2", "demo2"],//可以同時添加兩個（或更多），name值相同也必須分開設置，name數組的長度就是每組input的個數。type、value、maxlength、className四種屬性，若同組組員的設置一樣，可以只設置一次。 
  22.         value: ["默認值2-1", "默認值2-2"],//可以給同組input分別設置默認值 
  23.         maxlength: 15,//每組input的maxlength都一樣，無需使用數組 
  24.         className: ["demo2_class1", "demo2_class2"],//不用我解釋了吧 
  25.         toplimit: 5,//可以添加組數上限（默認是0，表示無上限），它是總管，so，name相當于小組組長 
  26.         initValue: [//初始化的時候，各input的value就是歸它管，必須是數組 
  27.             ["初始值2-1", "初始值2-2"] 
  28.         ] 
  29.     }); 
  30.     $("#demo3").easyinsert({ 
  31.         name: "demo3", 
  32.         toplimit: 2, 
  33.         initValue: [ 
  34.             ["初始值3-1"],//必須是數組，就算每組只有一個input 
  35.             ["初始值3-2"], 
  36.             ["初始值3-3"]//小三兒，別想蒙混過關，總管只允許添加兩組 
  37.         ] 
  38.     }); 
  39.     $("#demo4").easyinsert({ 
  40.         name: ["demo4", "demo4", "demo4", "demo4", "demo4", "demo4"], 
  41.         type: ["text", "radio", "password", "checkbox", "file", "button"], 
  42.         value: ["我是text", "我是radio", "我是password", "我是checkbox", "", "我是button"] 
  43.     }); 
  44.     $("#demo5").easyinsert({//type新增custom和select 
  45.         name: ["demo5", "demo5", "demo5", "demo5"], 
  46.         type: ["custom", "text", "custom", "select"], 
  47.         value: ["<strong style=\"color:#ff7b0e;\">科目：</strong>", "", "<strong style=\"color:#ff7b0e;\">類型：</strong>", { '理論': '1', '技能': '2', '上機': '3' }], 
  48.         initValue: [ 
  49.             ["<strong style=\"color:#ff7b0e;\">科目：</strong>", "初始值5-1", "<strong style=\"color:#ff7b0e;\">類型：</strong>", { '理論a': '1', '技能a': '2', '上機a': '3' }], 
  50.             ["<strong style=\"color:#ff7b0e;\">科目：</strong>", "初始值5-1", "<strong style=\"color:#ff7b0e;\">類型：</strong>", { '理論b': '1', '技能b': '2', '上機b': '3' }] 
  51.         ] 
  52.     }); 
  53. }); 
  54.  
  55. /** 
  56.  * EasyInsert 4.0 
  57.  * http://IlikejQuery.com/EasyInsert 
  58.  * 
  59.  * @Creator   wo_is神仙 <jsw0528@MrZhang.net> 
  60.  * @Depend    jQuery 1.4+ 
  61. **/ 
  62.  
  63. ;(function($){ 
  64.     $.fn.extend({ 
  65.         "easyinsert": function(o){ 
  66.             o = $.extend({ 
  67.                 //觸發器 
  68.                 clicker: null,//根據class（或id）選擇，默認.next()獲取 
  69.                 //父標簽 
  70.                 wrap: "li", 
  71.                 name: "i-text", 
  72.                 type: "text", 
  73.                 value: "", 
  74.                 maxlength: 20, 
  75.                 className: "i-text", 
  76.                 //新增上限值 
  77.                 toplimit: 0,//0表示不限制 
  78.                 //初始化值，二維數組 
  79.                 initValue: null//用于修改某資料時顯示已有的數據 
  80.             }, o || {}); 
  81.             var oo = { 
  82.                 remove: "<a href=\"#nogo\" class=\"remove\">移除</a>", 
  83.                 error1: "參數配置錯誤，數組的長度不一致，請檢查。", 
  84.                 error2: "參數配置錯誤，每組初始化值都必須是數組，請檢查。" 
  85.             } 
  86.             //容器 
  87.             var $container = $(this); 
  88.             var allowed = true; 
  89.  
  90.             //把屬性拼成數組（這步不知道是否可以優化？） 
  91.             var arrCfg = new Array(o.name, o.type, o.value, o.maxlength, o.className); 
  92.             //arr ==> [name, type, value, maxlength, className]  
  93.             var arr = new Array(); 
  94.             $.each(arrCfg, function(i, n){ 
  95.                 if ( $.isArray(n) ) { 
  96.                     arr[i] = n; 
  97.                 } else { 
  98.                     arr[i] = new Array(); 
  99.                     if ( i === 0 ) { 
  100.                         arr[0].push(n); 
  101.                     }else{ 
  102.                         //補全各屬性數組（根據name數組長度） 
  103.                         $.each(arr[0], function() { 
  104.                             arr[i].push(n); 
  105.                         }); 
  106.                     } 
  107.                 } 
  108.                 //判斷各屬性數組的長度是否一致 
  109.                 if ( arr[i].length !== arr[0].length ) { 
  110.                     allowed = false; 
  111.                     $container.text(oo.error1); 
  112.                 } 
  113.             }); 
  114.  
  115.             if ( allowed ) { 
  116.                 //獲取觸發器 
  117.                 var $Clicker = !o.clicker ? $container.next() : $(o.clicker); 
  118.                 $Clicker.bind("click", function() { 
  119.                     //未添加前的組數 
  120.                     var len = $container.children(o.wrap).length; 
  121.                     //定義一個變量，判斷是否已經達到上限 
  122.                     var isMax = o.toplimit === 0 ? false : (len < o.toplimit ? false : true); 
  123.                     if ( !isMax ) {//沒有達到上限才允許添加 
  124.                         var $Item = $("<"+ o.wrap +">").appendTo( $container ); 
  125.                         $.each(arr[0], function(i) { 
  126.                             switch ( arr[1][i] ) { 
  127.                                 case "select"://下拉框 
  128.                                     var option = ""; 
  129.                                     $.each(arr[2][i], function(i, n) { 
  130.                                         option += "<option value='"+ n +"'>"+ i +"</option>"; 
  131.                                     }); 
  132.                                     $("<select>", { 
  133.                                         name: arr[0][i], 
  134.                                         className: arr[4][i] 
  135.                                     }).append( option ).appendTo( $Item ); 
  136.                                     break; 
  137.                                 case "custom"://自定義內容，支持html 
  138.                                     $Item.append( arr[2][i] ); 
  139.                                     break; 
  140.                                 default://默認是input 
  141.                                     $("<input>", {//jQuery1.4新增方法 
  142.                                         name: arr[0][i], 
  143.                                         type: arr[1][i], 
  144.                                         value: arr[2][i], 
  145.                                         maxlength: arr[3][i], 
  146.                                         className: arr[4][i] 
  147.                                     }).appendTo( $Item ); 
  148.                             } 
  149.                         }); 
  150.                         $Item = $container.children(o.wrap); 
  151.                         //新組數 
  152.                         len = $Item.length; 
  153.                         if ( len > 1 ) { 
  154.                             $Item.last().append(oo.remove); 
  155.                             if ( len === 2 ) {//超過一組時，為第一組添加“移除”按鈕 
  156.                                 $Item.first().append(oo.remove); 
  157.                             } 
  158.                         } 
  159.                         $Item.find(".remove").click(function(){ 
  160.                             //移除本組 
  161.                             $(this).parent().remove(); 
  162.                             //統計剩下的組數 
  163.                             len = $container.children(o.wrap).length; 
  164.                             if ( len === 1 ) {//只剩一個的時候，把“移除”按鈕干掉 
  165.                                 $container.find(".remove").remove(); 
  166.                             } 
  167.                             //取消“移除”按鈕的默認動作 
  168.                             return false; 
  169.                         }); 
  170.                     } 
  171.                     //取消觸發器的默認動作 
  172.                     return false; 
  173.                 }); 
  174.                 //初始化 
  175.                 if ( $.isArray(o.initValue) ) {//判斷初始值是否是數組（必需的） 
  176.                     $.each(o.initValue, function(i, n) { 
  177.                         if ( !$.isArray(n) ) { 
  178.                             $container.empty().text(oo.error2); 
  179.                             return false; 
  180.                         }else{ 
  181.                             if ( n.length !== arr[0].length ) { 
  182.                                 $container.empty().text(oo.error1); 
  183.                                 return false; 
  184.                             } 
  185.                         } 
  186.                         var arrValue = new Array(); 
  187.                         //初始值替換默認值 
  188.                         $.each(n, function(j, m) { 
  189.                             arrValue[j] = arr[2][j] 
  190.                             arr[2][j] = m; 
  191.                         }); 
  192.                         $Clicker.click(); 
  193.                         //默認值替換初始值 
  194.                         $.each(arrValue, function(j, m) { 
  195.                             arr[2][j] = m; 
  196.                         }); 
  197.                         //上面這種[移形換位法]不知道效率怎么樣，我想不出別的更好的方法 
  198.                     }); 
  199.                 }else{ 
  200.                     $Clicker.click(); 
  201.                 } 
  202.             } 
  203.         } 
  204.     }); 
  205. })(jQuery); 
  206. </script> 
  207. </head> 
  208.  
  209. <body> 
  210. <table width="90%" align="center"> 
  211.     <tr> 
  212.         <td width="10%" align="right"><strong>Demo1</strong></td> 
  213.         <td width="90%"> 
  214.             <ul id="demo1"></ul> 
  215.             <a href="#">+ 添加</a> 
  216.         </td> 
  217.     </tr> 
  218.     <tr> 
  219.         <td align="right"><strong>Demo2</strong></td> 
  220.         <td> 
  221.             <ul id="demo2"></ul> 
  222.             <a href="#">+ 添加（最多5項）</a> 
  223.         </td> 
  224.     </tr> 
  225.     <tr> 
  226.         <td align="right"><strong>Demo3</strong></td> 
  227.         <td> 
  228.             <ul id="demo3"></ul> 
  229.             <a href="#">+ 添加（最多2項）</a> 
  230.         </td> 
  231.     </tr> 
  232.     <tr> 
  233.         <td align="right"><strong>Demo4</strong></td> 
  234.         <td> 
  235.             <ul id="demo4"></ul> 
  236.             <a href="#">+ 添加</a> 
  237.         </td> 
  238.     </tr> 
  239.     <tr> 
  240.         <td align="right"><strong>Demo5</strong> <sup style="color:#F00;">NEW</sup></td> 
  241.         <td> 
  242.             <ul id="demo5"></ul> 
  243.             <a href="#">+ 添加</a> 
  244.         </td> 
  245.     </tr> 
  246. </table> 
  247. </body> 
  248. </html> 

 

下載地址：

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

向AI問一下細節

免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。

AI
助
手
芒康县| 年辖：市辖区| 永丰县| 昔阳县| 灯塔市| 平度市| 上饶市| 慈溪市| 灵武市| 南阳市| 普兰店市| 平安县| 兴化市| 永登县| 新沂市| 象州县| 如皋市| 惠安县| 稻城县| 永昌县| 高台县| 甘肃省| 商南县| 安西县| 阿拉尔市| 马尔康县| 大新县| 湖北省| 莱阳市| 张家口市| 临猗县| 石泉县| 菏泽市| 宜春市| 洛浦县| 茌平县| 五台县| 焦作市| 广灵县| 孟津县| 富民县|