转自: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"); //创建span var span = document.createElement("span"); span.id = "lbl" + count; span.innerText = "您的第" + count + "个问题: "; question.appendChild(span); //创建input var 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 = 0 var 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=" 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>