javascript实现自动添加文本框功能

转自：http://www.cnblogs.com/damonlan/archive/2011/08/03/2126046.html

昨天，我们公司的网络小组决定为公司做一个内部的网站，主要是为员工比如发布公告啊、填写相应信息、投诉、问题等等需求。我那同事给了我以下需求：

1.点击一个按钮就增加一个文本框。

2.把新建的文本框的名字命名为 questions[1] ,questions[2],questions[3]....这种形式。

3.可以删除，每次删除最后一个。

4.变色功能。就是当鼠标移入到一个文本框的时候，当前背景色自动的变成灰色。

其他以后扩展再说。

先不说，上图为好，下面就是最终实现的效果。

整个过程不算太难理解，就是昨天晚上在整那个左边系号的时候刚开始老是不对。后来整了一个全局变量，在进行判断一下就OK了。

代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title></title><script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script><script type="text/javascript">var count = 1;//用来判断是删除 还是增加按钮 以便count值进行计算function checkCount(boolOK, coun) {if (boolOK == true) {return count++;}else {count--;}}//添加一个input标签 同时也对它的ID和Name进行赋值。function AddInput() {// checkCount(2, true);
            countAA = checkCount(true, count);// alert(countAA);//count++;var question = document.getElementById("question");//创建spanvar span = document.createElement("span");span.id = "lbl" + count;span.innerText = "您的第" + count + "个问题： ";question.appendChild(span);//创建inputvar input = document.createElement("input");input.type = "text";input.id = "questions[" + count + "]";input.name = "questions[" + count + "].name";question.appendChild(input);//创建一个空格var br = document.createElement("br");question.appendChild(br);}//每次删除最后一个input标签function DecInput() {var count2 = 0var inputs = document.getElementsByTagName("input");for (var i = 0; i < inputs.length; i++) {var input = inputs[i];if (input.type == "text") {count2++;}}var question = document.getElementById("question");var whichInput = document.getElementById("questions[" + count2 + "]");var whichSpan = document.getElementById("lbl" + count2 + "");question.removeChild(whichInput);question.removeChild(whichSpan);var brs = document.getElementsByTagName("br");question.removeChild(brs[count2 - 1]);checkCount(false, count2);}function TestClick() {var q2 = document.getElementById("questions[4]");if (q2) {alert("OK");}else {alert("No...");}}function initEvent() {var inputs = document.getElementsByTagName("input");for (var i = 0; i < inputs.length; i++) {var input = inputs[i];if (input.type == "text") {input.onmouseout = myOnmouseout;input.onfocus = myOnfocus;}}}function myOnmouseout() {this.style.backgroundColor = "white";}function myOnfocus() {this.style.backgroundColor = "gray";}</script>
</head>
<body onmousemove="initEvent()"><fieldset style="width: 500px; margin-left: 200px;"><legend><h6>亲爱的用户，请输入您的问题</h6></legend><div id="question" style="border: 1px solid red;"><span id="span1">您的第1个问题：</span><input id="Text1" type="text" /><br /></div><div style="margin-top: 100px;"><input id="btnAddInput" type="button" value="新增一个Input" onclick="AddInput()" /><input id="btnDecre" type="button" value="删除一个Input" onclick="DecInput()" /><input id="Button1" type="button" value="测试" onclick="TestClick()" /></div></fieldset>
</body>
</html>