`
Beaver's
  • 浏览: 396271 次
  • 性别: Icon_minigender_2
  • 来自: 天津
社区版块
存档分类
最新评论

javascript动态添加删除文本框

阅读更多

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript">
var count = 0;
function Add(){
   count += 1;
   var File1 = document.getElementById("file1");
   var div = document.createElement("div");
   var countTxt = document.createTextNode("Hardware"+count);
   var inputTxt = document.createElement("input");
   inputTxt.type = "text";
   inputTxt.name = "txt"+count;
   var btn = document.createElement("input");
   btn.type = "button";
   btn.value = "delete";
   btn.onclick = function(){
       this.parentNode.parentNode.removeChild(this.parentNode);
       var str = File1.innerHTML;
       var re = /[^<]+/i;
       var n = File1.getElementsByTagName("div");
       for(var k=0;k<n.length;k++){
           n[k].innerHTML = n[k].innerHTML.replace(re,"Hardware"+(k+1));
           n[k].getElementsByTagName("input").item(1).onclick = this.onclick;
       }
       count -= 1;
   }
   
   div.appendChild(countTxt);
   div.appendChild(inputTxt);
   div.appendChild(btn);
   File1.appendChild(div);
}
</script>
</head>
<body>
<input type="button" name="button" value="add" onclick="Add();" />
<div id="file1"></div>
</body>
</html>
分享到:
评论

相关推荐

    javascript 动态添加/删除 文本框

    可以动态的添加 删除 文本框!代码几乎不用修改就直接能用,简单方便

    js动态生成文本框并有删除功能

    本篇文章将详细解析如何使用JavaScript来动态创建文本框,并为这些文本框添加删除功能。 #### 一、HTML结构设置 在给定的代码片段中,我们首先看到的是一个简单的HTML页面结构。它包含了一个表单(form),该表单内...

    动态添加删除TEXT框

    当我们谈论“动态添加删除TEXT框”,意味着我们需要在用户交互时动态地创建或移除这些文本输入字段。 1. **HTML基础**:HTML是网页内容的基础结构语言。在这里,我们需要创建一个基本的HTML框架,包括一个用于添加...

    jquery动态生成文本框,含删除按钮

    本案例聚焦于使用jQuery动态生成文本框,并且每个文本框都配备有删除按钮。这个功能常见于需要用户输入多条类似信息的场景,如在线表单或任务管理器。 首先,`demo.html`和`demo_1.html`是两个不同的示例页面,展示...

    javascript 文本框下拉提示与cookie应用实例

    在JavaScript编程中,文本框(input type="text")下拉提示是一种常见的用户交互设计,它可以帮助用户在输入时快速选择或参考预设的选项。在这个实例中,我们结合了JavaScript和Cookie技术来实现这一功能。 首先,...

    动态生成文本框

    这个功能允许用户根据需要动态添加或删除输入字段,极大地提升了用户体验和交互性。下面我们将深入探讨动态生成文本框的核心概念、实现方法以及相关技术。 一、动态生成文本框的概念 动态生成文本框是指在用户进行...

    jquery文本框添加删除标签代码.zip

    本示例“jquery文本框添加删除标签代码”是利用jQuery实现的一个功能,允许用户在文本框中输入文字后将其转化为可删除的标签。这种功能常见于许多网站,比如用户输入兴趣爱好或关键词时,会自动生成标签,方便管理和...

    javascript经典特效---文本框栏目介绍.rar

    1. **自动完成(Autocomplete)**:JavaScript可以为文本框添加自动完成功能,当用户输入时,根据预设的数据源提供匹配建议,提高输入速度。这通常通过监听键盘事件并实时搜索匹配项来实现。 2. **输入验证(Input ...

    动态创建多个文本框取值

    6. **客户端脚本交互**:为了实现“任意修改数量”的功能,可能需要使用JavaScript或jQuery等客户端技术,让用户能够增加或删除文本框。这通常涉及到DOM操作,以及与服务器端的异步通信(如AJAX请求)来更新服务器...

    javascript按钮添加控件

    这段代码展示了一个网页应用,其中包含一个按钮,当点击该按钮时,会动态地在页面上添加一个新的输入文本框(控件)以及一个删除链接。这涉及到对DOM(文档对象模型)的操作,以及事件处理函数的编写。下面我们将...

    利用js实现前台动态添加文本框,后台获取文本框内容(示例代码)

    在本文中,我们将深入探讨如何使用JavaScript(js)在前端动态添加文本框,并在后端获取这些文本框的内容。这是一个常见的需求,特别是在构建交互式Web应用程序时,用户可能需要输入多个相似的数据项。 首先,我们...

    文本框添加多个关键词

    在这个场景下,它可能被用来优雅地处理用户输入关键词的交互,如动态添加、删除关键词,或者对输入的关键词进行验证。 综上所述,要实现文本框添加多个关键词,我们需要结合HTML5的`&lt;input&gt;`元素的`multiple`属性,...

    一款jquery text文本框添加删除标签代码.zip

    本资源"一款jquery text文本框添加删除标签代码.zip"提供了一个实现用户在文本框中动态添加和删除标签的功能。这个功能在很多现代网站中常见,比如用于输入关键词、兴趣爱好或分类等场景。 首先,让我们了解一下...

    文本框添加文字标签.rar_humandwe_文本框添加文字标签

    在"表单文本框添加文字标签"的实现中,jQuery可以高效地处理元素的选择、添加、删除以及动态更新,使得这个功能的实现更加简洁和高效。 实现这个功能的基本步骤可能包括以下几点: 1. **选择元素**:首先,你需要...

    点击增加多个文本框也可以删除

    "点击增加多个文本框也可以删除"这个功能,正如标题和描述所提到的,允许用户根据需求动态添加或移除文本输入框,提供了更好的用户体验和更高的数据录入灵活性。 首先,我们要理解文本框(Text Box)在网页或应用中...

    js javascript 文本框一边输入一边后面跟个空格,并且光标在字符串后空格前,光标定位

    这个简单的示例展示了如何使用JavaScript动态修改文本框的内容并控制光标位置。不过,实际应用中可能需要考虑更多的细节,例如防止连续输入空格、处理回车键、删除键以及其他特殊字符的情况。此外,为了适应不同的...

    jquery表单文本框添加文字标签.zip

    7. **样式与交互**:为了提供良好的用户体验,我们还需要为标签元素添加合适的CSS样式,以及处理用户可能的交互,如删除标签。可以通过添加`click`事件监听器,使用`remove()`方法移除标签。 以上就是利用jQuery...

    ExtJs 动态添加表单

    它可能包含了创建表单、动态添加和删除字段的逻辑,以及与服务器通信的代码。通过阅读和分析这个文件,我们可以更深入地了解如何在实际项目中应用这些技术。 总之,动态添加表单是ExtJS开发中的一个重要技巧,它...

    自动关联文本框

    JavaScript可以通过DOM API来获取、修改、添加或删除页面元素,包括文本框。例如,`document.getElementById('id')`可以获取指定ID的元素,`element.value`则能获取或设置该元素的值。 2. 事件监听:为了让文本框值...

Global site tag (gtag.js) - Google Analytics