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

动态|文本框|页面

在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" >
</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" />
    <input type="button" value="Remove Textbox" />
  </p>
  <p><input type="Submit" value="Submit" /></p>
</form>
</body>
</html>

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

时间: 2024-11-02 07:30:37

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

JSP页面上用下横线代替文本框效果的代码_JSP编程

复制代码 代码如下: <tr> <td class="content" colspan = 4> <input type="hidden" name="newuser" value="yes"><div align="center"><center><p><strong>帐户:</strong> <font

如何利用Ajax动态实现JSP页面上根据后台不同数据改变页面表格&amp;amp;lt;td&amp;amp;gt;的背景色

问题描述 如何利用Ajax动态实现JSP页面上根据后台不同数据改变页面表格<td>的背景色 如题,我在一个停车场管理系统中,通过页面上每个代表车位的单元格来监控车位的状态,不同的单元格表示不同的车位使用情况,后台的车位状态数据是通过action传过来的一个map,求大神解答或者给个思路 解决方案 每个单元格按照行列给出一个id jquery根据传来的坐标得到id,设置css 解决方案二: 车位位置,这些都不变的.车位增加id配置,服务器返回json数据如{"id1":&qu

网页开发 在页面上增加了在线编辑功能在ie上出现的问题 火狐谷歌没问题

问题描述 网页开发 在页面上增加了在线编辑功能在ie上出现的问题 火狐谷歌没问题 解决方案 明显兼容性问题么,判断一下浏览器,当为ie时执行那些css样式

关于微信开发,jsp页面上弹出一个文本框

问题描述 关于微信开发,jsp页面上弹出一个文本框 微信开发不支持 prompt ,怎么样点击一个按钮然后弹出一个输入框?求大神帮助 解决方案 给按钮就一个click事件,,里面动态生成一个文本框就行了,,, 解决方案二: 是弹出一个文本框还是显示一个文本框?如果是显示一个文本框那就使用js,加入一个点击事件,动态生成或事先预备好文本框都可以.如果是弹出文本框的效果,那就可以采用第三方插件bootstrap或jqueryUI去实现

在页面上放一个文本框和一个按钮,想文本框中输入内容点击按钮,读出输入的内容。发声的。可以听见的 谢谢。急急急急!!!!!!!!!!!!

问题描述 在页面上放一个文本框和一个按钮,想文本框中输入内容点击按钮,读出输入的内容.发声的.可以听见的谢谢.急急急急!!!!!!!!!!!!

我在页面上有五个文本框,我想在输完最后一个文本框的内容以后,回车以后将五个文本框的内容都清空,并将焦点回到第一个文本框处

问题描述 我在页面上有五个文本框,我想在输完最后一个文本框的内容以后,回车以后将五个文本框的内容都清空,并将焦点回到第一个文本框处.该如何实现,请大家指教!我试了一下大虾们以前解答的帖子,document.formname.inputname.value="",它报错是"未声明名称'document'",请问我该如何声明呢?我用的是VS2005环境 解决方案 解决方案二:,document.formname.inputname.value=""是

怎样获取一个文本框在页面上的位置信息?

问题描述 我有一个文本框,下面还有一个DIV,我想让DIV绝对定位在文本框的下面,因为如果相对定位的话,文本框下面的按钮之类的会被DIV撑走.我想让DIV浮在这些按钮之上并定位在文本框之下.不知道怎么得到这个文本框的TOP,LEFT值,因为我并没有设置这些值,用文本框.style.top/left得不到.希望达人们帮帮忙.谢谢. 解决方案 先将div和文本框放在同一个父元素之下.然后通过文本框的offsetTop/offsetHeight/offsetLeft的值,对div进行定位:var di

Word中通过删除页码文本框将所有页的页码全部删除

  把文档前5页的页码取消,而后面的都保留着,为什么一取消就把文档所有的页码都取消了? 用'分页符'和各节之间页眉页脚的链接设置可以实现,具体操作如下: 1.分页符的应用 在制作word文档的时候先用分页符功能将文档分成若干个小节,可以对每节的页面格式及页眉页脚进行单独设置. 操作:把光标放在要设置分页的位置,在工具栏中单击'插入'→'分隔符',选择'分节符类型'里的'下一页'即可在指定位置插入分节符. 2.对页眉页脚的独立编辑方法 1)页码的插入:'插入'→'页码',在对话框中根据自己的要求设

js实现文本框中输入文字页面中div层同步获取文本框内容的方法

 这篇文章主要介绍了js实现文本框中输入文字页面中div层同步获取文本框内容的方法,实例分析了javascript操作dom元素的技巧,需要的朋友可以参考下     本文实例讲述了js实现文本框中输入文字页面中div层同步获取文本框内容的方法.分享给大家供大家参考.具体实现方法如下:   代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/x