 |
|
|
 首页 |
名片设计 CorelDRAW Illustrator AuotoCAD Painter 其他软件 Photoshop Fireworks Flash |
|
在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> 上面的两个例子基本上可以满意增加或删除一个文本输入筐的要求了吧?特此存档.也希望对大家有帮助. 返回类别: 教程 上一教程: 6行代码实现无组件上传 下一教程: WEB打印设置解决方案二(利用SCRIPTX.CAB控件改变IE打印设置) 您可以阅读与"动态的在页面上增加或删除一个文本框"相关的教程: · 如何在页面上动态的生成 WEBFORM控件 · 怎样读取一个文本文件的内容? · 读取一个文本文件的内容 · 动态增加\删除物件如(TEXT,TABLE)的例子 · 怎样读取一个文本文件的内容 |
  |
| 快精灵印艺坊 版权所有 |
首页 会员中心在线印刷在线编辑付款方式索取样品设计指南连锁门店
|
||
