js新增刪除文字框

lm_y發表於2017-08-17
JS
  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.     <title></title>  
  5.     <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>  
  6.     <script type="text/javascript">  
  7.         var count = 1;  
  8.   
  9.         //用來判斷是刪除 還是增加按鈕 以便count值進行計算  
  10.         function checkCount(boolOK, coun) {  
  11.             if (boolOK == true) {  
  12.                 return count++;  
  13.             }  
  14.             else {  
  15.                 count--;  
  16.             }  
  17.         }  
  18.   
  19.         //新增一個input標籤 同時也對它的ID和Name進行賦值。  
  20.         function AddInput() {  
  21.             // checkCount(2, true);  
  22.             countAA = checkCount(true, count);  
  23.             // alert(countAA);  
  24.             //count++;  
  25.             var question = document.getElementById("question");  
  26.   
  27.             //建立span  
  28.             var span = document.createElement("span");  
  29.             span.id = "lbl" + count;  
  30.             span.innerText = "您的第" + count + "個問題： ";  
  31.             question.appendChild(span);  
  32.   
  33.             //建立input  
  34.             var input = document.createElement("input");  
  35.             input.type = "text";  
  36.             input.id = "questions[" + count + "]";  
  37.             input.name = "questions[" + count + "].name";  
  38.             question.appendChild(input);  
  39.   
  40.             //建立一個空格  
  41.             var br = document.createElement("br");  
  42.             question.appendChild(br);  
  43.         }  
  44.   
  45.         //每次刪除最後一個input標籤  
  46.         function DecInput() {  
  47.             var count2 = 0  
  48.             var inputs = document.getElementsByTagName("input");  
  49.             for (var i = 0; i < inputs.length; i++) {  
  50.                 var input = inputs[i];  
  51.                 if (input.type == "text") {  
  52.                     count2++;  
  53.                 }  
  54.             }  
  55.   
  56.             var question = document.getElementById("question");  
  57.   
  58.             var whichInput = document.getElementById("questions[" + count2 + "]");  
  59.             var whichSpan = document.getElementById("lbl" + count2 + "");  
  60.   
  61.             question.removeChild(whichInput);  
  62.             question.removeChild(whichSpan);  
  63.   
  64.             var brs = document.getElementsByTagName("br");  
  65.             question.removeChild(brs[count2 - 1]);  
  66.   
  67.             checkCount(false, count2);  
  68.         }  
  69.   
  70.   
  71.   
  72.         function TestClick() {  
  73.             var q2 = document.getElementById("questions[4]");  
  74.             if (q2) {  
  75.                 alert("OK");  
  76.             }  
  77.             else {  
  78.                 alert("No...");  
  79.             }  
  80.         }  
  81.   
  82.         function initEvent() {  
  83.             var inputs = document.getElementsByTagName("input");  
  84.             for (var i = 0; i < inputs.length; i++) {  
  85.                 var input = inputs[i];  
  86.                 if (input.type == "text") {  
  87.                     input.onmouseout = myOnmouseout;  
  88.                     input.onfocus = myOnfocus;  
  89.                 }  
  90.             }  
  91.         }  
  92.   
  93.         function myOnmouseout() {  
  94.             this.style.backgroundColor = "white";  
  95.         }  
  96.   
  97.         function myOnfocus() {  
  98.             this.style.backgroundColor = "gray";  
  99.         }  
  100.     </script>  
  101. </head>  
  102. <body onmousemove="initEvent()">  
  103.     <fieldset style="width: 500px; margin-left: 200px;">  
  104.         <legend>  
  105.             <h6>  
  106.                 親愛的使用者，請輸入您的問題</h6>  
  107.         </legend>  
  108.         <div id="question" style="border: 1px solid red;">  
  109.             <span id="span1">您的第1個問題：</span>  
  110.             <input id="Text1" type="text" /><br />  
  111.         </div>  
  112.         <div style="margin-top: 100px;">  
  113.             <input id="btnAddInput" type="button" value="新增一個Input" onclick="AddInput()" />  
  114.             <input id="btnDecre" type="button" value="刪除一個Input" onclick="DecInput()" />  
  115.             <input id="Button1" type="button" value="測試" onclick="TestClick()" />  
  116.         </div>  
  117.     </fieldset>  
  118. </body>  
  119. </html>

相關文章