昨天，我们公司的网络小组决定为公司做一个内部的网站，主要是为员工比如发布公告啊、填写相应信息、投诉、问题等等需求。我那同事给了我以下需求：
1.点击一个按钮 就增加一个文本框。
2.把新建的文本框的名字命名为 questions[1] ,questions[2],questions[3]....这种形式。
3.可以删除，每次删除最后一个。
4.变色功能。就是当鼠标移入到一个文本框的时候，当前背景色自动的变成灰色。
其他 以后扩展再说。
先不说，上图为好，下面就是最终实现的效果。
整个过程不算太难理解，就是昨天晚上在整那个左边系号的时候 刚开始老是不对。后来整了一个全局变量，在进行判断一下就OK了。
代码如下：
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=" 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>