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

转载 2005年04月26日 17:16:00

在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>

上面的两个例子基本上可以满足增加或删除一个文本输入筐的要求了吧?
特此存档.也希望对大家有帮助.


java读取excel、txt 文件内容,传到、显示到另一个页面的文本框里面。

第一、 utils 工具类,读取Excel 、Txt文件 的方法! 如下:   public class Excel { /** * 读取Excel文件 * @param f...
  • yyh777
  • yyh777
  • 2012年06月01日 14:19
  • 1036

点击添加按钮用jquery获取文本框值,传值给另一个页面

jquery使用     http://jsjquery-1.3.1.js">>                 function addTwo() {             var ...

ViewPager+Fragment动态增加,删除页面

  • 2017年05月08日 21:05
  • 4.98MB
  • 下载

动态增加html表单(文本框)

  • 2008年01月18日 10:44
  • 2KB
  • 下载

JQuery 将一个text文本框动态改变为一个文本编辑器

之前在写js文件时常喜欢把js文件作为外部文件加载到html文件中,但今天同事介绍一种新的写法,可以把自己编写的js文件放到一个js库中,打个比方在java编程时我们会使用 libary库,我们可以...

javascript 动态添加/删除 文本框

  • 2011年02月18日 12:52
  • 3KB
  • 下载

今天看到猪八戒网的一个动态的文本框,心血来潮自己也做了一个

猪八戒网的效果图: 源代码: 仿猪八戒放制作|动态循环切换input框内容 var content = new Array(); content[0] =...
  • wclxyn
  • wclxyn
  • 2012年02月18日 19:50
  • 1007

文本框编辑多按几次删除(退格)键返回登录页面异常修改

禁止多次删除键会一步步返回到登录页面

Flash: Flash动态文本框内动态文本内容自适应 - 我正要找的一个组件

来源:http://www.samhy.com/article/44.htm 感谢原作者!Flash动态文本框内动态文本内容自适应这样一道题关于Flash的:Flash场景中有一个文本框,它的长和宽是...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:动态的在页面上增加或删除一个文本框
举报原因:
原因补充:

(最多只允许输入30个字)