在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动态生成文本框并实现删除功能的知识点 在现代Web开发中，动态地操作DOM（文档...通过以上步骤，我们可以实现一个动态的文本框生成与删除的功能。这种方式不仅增强了用户体验，也为Web应用提供了更多的灵活性。
6. **客户端脚本交互**：为了实现“任意修改数量”的功能，可能需要使用JavaScript或jQuery等客户端技术，让用户能够增加或删除文本框。这通常涉及到DOM操作，以及与服务器端的异步通信（如AJAX请求）来更新服务器...
4. **动态生成文本框**：在生成函数内部，使用`$('<input type="text">')`创建一个新的文本框元素，并可以设置其属性，如ID或class。同时，创建一个删除按钮，通常是一个`<button>`元素，绑定一个删除事件监听器。 ...
在本文中，我们将深入探讨如何使用jQuery来创建一个功能丰富的文本框，该文本框能够动态地生成和管理关键词标签。这个功能广泛应用于各种网站，如社交媒体、博客平台、论坛等，帮助用户方便地组织和分类内容。 首先...
在ASP.NET开发中，"asp.net文本框下拉列表批量删除"是一个常见的需求，尤其是在处理大量数据时。这个功能允许用户通过输入关键词进行搜索，并一次性删除满足条件的多项选择。在本场景中，jQuery库被用来增强前端交互...
这段代码会在页面加载完成后，对id为`textInput`的文本框应用`inputLimit`插件，从而限制用户只能输入汉字和字母。 此外，我们还可以进一步扩展插件，增加自定义选项，比如允许数字、特殊字符等。例如，我们添加一...
在这个场景下，"动态插入和删除节点"指的是在网页运行时，根据用户交互或程序逻辑动态地增加或移除HTML元素，例如文本框或其他表单控件。 首先，让我们深入理解动态插入HTML节点的基本概念。在HTML文档对象模型...
总的来说，"绿叶装饰文本框PPT素材.rar"是一个包含多款以绿叶为设计元素的文本框模板的资源包，适用于那些希望在PowerPoint演示中增加自然、清新的设计风格的用户。通过下载并导入这些素材，用户可以轻松提升PPT的...
本示例中，我们探讨的主题是“jQuery表单选项动态增加删除代码”，这是一个使用jQuery和特定插件（addel.js）来实现的交互式表单管理功能。这个功能允许用户在运行时动态添加或删除表单输入字段，例如文本框，极大地...
在这个项目中，JavaScript可能实现了键盘逻辑，包括处理键盘按钮的点击事件，将用户的选择或输入添加到文本框中，以及可能的回退、删除等特殊功能。JavaScript还可以实现键盘的动画效果，如弹出和消失的过渡。 4. *...
综上所述，通过JavaScript实现添加和删除表格行以及双击变文本框的功能需要综合运用DOM操作方法、事件处理和元素的属性修改。这些技术的熟练运用，将使得Web页面的交互更加流畅和人性化。学习和实践这些技能对于前端...
6. **互动性**：如果可能，可以将动态效果或交互式元素融入文本框设计，如点击展开下一级步骤，增加观众参与度。 7. **内容简洁**：每个文本框内的文字应简明扼要，避免长篇大论。尽量用简洁的语言表达核心思想，...
在PPT设计中，彩色圆形并列文本框是...综上所述，"彩色圆形并列文本框PPT模板"是一个实用的设计工具，可以帮助用户快速创建引人注目的演示文稿。通过理解和应用上述知识点，你可以更有效地传达信息，提升演讲的影响力。
2. **显示数据**：获取到的数据被存储在`data`变量中，然后使用`out.println`将其打印到页面上，以便用户或开发者查看。 总结一下，这个示例展示了如何利用JavaScript在前端动态创建和管理文本框，以及如何将这些...
在ASP.NET开发中，动态生成控件是一种常见的技术，它允许开发者在运行时根据需要创建、修改或删除页面上的用户界面元素。这种技术对于构建高度交互性和灵活性的应用程序尤其有用，比如在线表单、购物车或者任何需要...
实现原理： 在document加载完成后(ready)，添加input的focus和blur事件，并进行增加和删除样式的操作。 代码示例： 代码如下: <html> <head><title></title> <style type=”text/css”&...
`QComboBox`通常用于下拉选择列表，而`QSpinBox`则是一个用于数值输入的小型文本框，只允许用户通过上下箭头或键盘输入整数。为了实现“combox中有多个spinBox”，开发者可能创建了一个自定义的`QComboBox`子类，...
具体到本文的场景，用户在文本框中输入一个值后，通过点击“生成”按钮，应用程序将根据用户输入的值动态创建一个CheckBox控件，并将其添加到页面上的CheckBoxList控件中。这个过程涉及到以下几个关键步骤： 1. ...
在JavaScript编程中，实现动态添加和删除表格行是一项常见的需求，尤其在构建数据表或配置界面时。这个功能包括在表格中添加新行、删除现有行，并确保在操作过程中序号自动生成和更新。以下是对这个"js实现添加删除...
首先，"layuiDemo"是基于layui框架的一个示例项目，展示了如何利用layui的组件来创建一个动态的增删改查界面。这个项目可能包含HTML、CSS、JavaScript以及与服务器交互的Ajax脚本，通过这些脚本，用户可以在前端完成...