动态的在页面上增加或删除一个文本框

动态的在页面上增加或删除一个文本框 在web开发中,经常会遇到这样的问题: 怎么样动态的在页面上增加或删除一个文本输入框? 通常有两种: 1.利用后台服务:比如 在session中设置一个变量num，每点一次 增加 按钮num的值+1，然后页面刷新一下(返回该页面)。 显示的时候从session中取到num的值，然后使用循环生成input框 % for(int i;i num;i++)){ % input type= text name= aaa / % } % 删除的情况和此相似,就是点击 删除 按钮后,num的值-1,然后刷新页面. 这种方法的确可以实现动态的增加或删除一个文本输入框,只是你先前在页面上填写的东西都没有了.并且需要后台服务器的处理,速度也有一定影响.这不是很好的方法 2.利用页面脚本,如javascript实现. javascript由于是运行在客户端,速度自然不成问题,并且你先前在页面上填写的东西并不会因为你的增加或删除文本输而丢失,使用非常方便,下面给出例子: HTML Head Script Language=JavaScript function insertRow(isTable){ index = isTable.rows.length; nextRow = isTable.insertRow(index); isText = nextRow.insertCell(0); txtArea = nextRow.insertCell(1); index++; index = index.toString(); nameStr = item +index; txtStr = Item +index; isText.innerHTML = txtStr; txtArea.innerHTML = input type=text name= +nameStr+ size=5 ; } /Script /Head Body Form name='Form1' Table id='dynTable' cellpadding=5 cellspacing=5 border=1 TR TD Item 1 /TD TD input type= text name= item1 size= 5 /TD /TR TR TD Item 2 /TD TD input type= text name= item2 size= 5 /TD /TR TR TD Item 3 /TD TD input type= text name= item3 size= 5 /TD /TR /Table /Form input type=button value= Insert row onclick= insertRow(dynTable) /Body /HTML 下面在给个功能更全的例子: html head title My Test Page /title script type= text/javascript !-- var textNumber = 1; function addTextBox(form, afterElement) { // Increment the textbox number textNumber++; // Create the label var label = document.createElement( label ); // Create the textbox var textField = document.createElement( input ); textField.setAttribute( type , text ); textField.setAttribute( name , txt +textNumber); textField.setAttribute( id , txt +textNumber); // Add the label's text label.appendChild(document.createTextNode( Text Box # +textNumber+ : )); // Put the textbox inside label.appendChild(textField); // Add it all to the form form.insertBefore(label,afterElement); return false; } function removeTextBox(form) { if (textNumber 1) { // If there's more than one text box // Remove the last one added form.removeChild(document.getElementById( txt +textNumber).parentNode); textNumber--; } } //-- /script style type= text/css !-- label { display:block; margin:.25em 0em; } -- /style /head body form id= myForm method= get action= ./ / label Text Box #1: input type= text name= txt1 id= txt1 / /label p input type= button value= Add Textbox onclick= addTextBox(this.form,this.parentNode) / input type= button value= Remove Textbox onclick= removeTextBox(this.form) / /p p input type= Submit value= Submit / /p /form /body /html 上面的两个例子基本上可以满足增加或删除一个文本输入筐的了吧? 特此存档.也希望对大家有帮助.