动态的在页面上增加或删除一个文本框
2005-04-15 10:31
489 查看
在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>
上面的两个例子基本上可以满足增加或删除一个文本输入筐的要求了吧?
特此存档.也希望对大家有帮助.
怎么样动态的在页面上增加或删除一个文本输入框?
通常有两种方法:
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>
上面的两个例子基本上可以满足增加或删除一个文本输入筐的要求了吧?
特此存档.也希望对大家有帮助.
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 动态的在页面上增加或删除一个文本框
- js动态的在页面上增加或删除一个文本框
- 一个网站的诞生- MagicDict未来予想図3 [表格的动态增加行和删除行，高手绕路]
- 页面中动态添加、删除文本框
- 一个网站的诞生- MagicDict未来予想図4 [表格的动态增加行和删除行，完整版]
- javascript编程小练习--制作一个表格，动态增加删除显示班级的学生信息。
- 动态增加按钮，动态删除按钮，一个函数响应动态增加的N个按钮的消息～
- 在页面上动态添加和删除【添加信息的文本框】
- JQuery实现动态增加和删除文本框
- 实例：动态增加和删除上传文件的文本框
- 一个页面实现修改删除列表显示，ajax动态生成table(使用ajax，springmvc，jsp)
- JQuery实现动态增加和删除文本框
- 这是一个动态改变选中的li的样式（增加/删除），
- ViewPager+Fragment动态增加页面，删除页面
- redis集群动态增加或者删除节点
- jQuery实现动态添加和删除一个div
- 动态表格，通过点击按钮增加或者删除一行表格!
- javascript实现动态增加行删除行.
- 一个 C++ 中动态的插入、删除数据的例子.
- 写一个静态HTML页面，直接写HTML代码和用JS动态生成代码，哪种方式要好