动态的在页面上增加或删除一个文本框
来源:互联网 发布:淘宝宝贝详情图片大小 编辑:程序博客网 时间:2024/06/01 11:34
在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>
上面的两个例子基本上可以满足增加或删除一个文本输入筐的要求了吧?
特此存档.也希望对大家有帮助.
- 动态的在页面上增加或删除一个文本框
- 动态的在页面上增加或删除一个文本框
- js动态的在页面上增加或删除一个文本框
- 实例:动态增加和删除上传文件的文本框
- JQuery实现动态增加和删除文本框
- JQuery实现动态增加和删除文本框
- 动态增加或删除菜单
- 动态增加或删除菜单
- ViewPager+Fragment动态增加页面,删除页面
- 页面中动态添加、删除文本框
- 怎样用javascript删除界面上的一个文本框
- 在mysql 的表中增加或删除列
- JS动态增加页面上的控件实例
- 在ORACLE中给已有数据的表增加、修改、删除一个字段(或一个列)或者多个字段(或多个列)的问题
- 动态增加文本框
- easyui动态增加文本框
- myeclipse 在文本框上出现一个类包的视图
- 在GridView的删除按钮上增加客户端确认提示。
- RFID - EPC HF Class1 学习心得
- 中国大陆的网站的特点
- 计算机组织与结构第二道题目的JAVA解法
- 由某人在程序人生高论《个人利益,国家利益如何决择。》引发
- GIF图形文件格式文档
- 动态的在页面上增加或删除一个文本框
- 我们在一个圈里,外面是放牧我们的人
- 关于使用javascript改变诸如ListBox控件的各个Item的值及顺序后怎么获取改变后的顺序
- 一些胡思乱想,近期琐事以及当前计划
- Linux环境进程间通信(五): 共享内存(上)(转载)
- javascript客户端规定最多输入的字符串长度
- 色彩运用
- 这是个引用测试
- 判断有没有中文字符