用javascript动态添加删除文本框

最新推荐文章于 2023-08-23 23:20:04 发布
最新推荐文章于 2023-08-23 23:20:04 发布
阅读量2k 收藏 1
点赞数
分类专栏： @html/js/css/Ajax 文章标签： javascript input file generator div button
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/phphot/article/details/2124326
版权



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title> new document </title>
    <meta name="generator" content="editplus" />
    <meta name="author" content="Gao YiXiang" />
    <meta name="email" content="yixianggao@126.com" />
    <meta name="keywords" content="javascript dhtml dom" />
    <meta name="description" content="I love web development." />
</head>
<body>
    <script   type="text/javascript">
var   count   =   0;
function   Add(num){
      count   +=   1;

      var   File1   =   document.getElementById("file1");
      var   div   =   document.createElement("div");
      var   countTxt   =   document.createTextNode("文本框"+count);
      var   inputTxt   =   document.createElement("input");
      inputTxt.type   =   "text";
      inputTxt.value   =   document.getElementById(num).value;
      inputTxt.name   =   "txt"+count;
      var   inputTxta   =   document.createElement("input");
      inputTxta.type   =   "text";
      inputTxta.value   =   document.getElementById("a"+num).value;
      inputTxta.name   =   "txt"+count;
      var   inputTxtaa   =   document.createElement("input");
      inputTxtaa.type   =   "text";
      inputTxtaa.value   =   document.getElementById("aa"+num).value;
      inputTxtaa.name   =   "txt"+count;
      var   inputTxtaaa   =   document.createElement("input");
      inputTxtaaa.type   =   "text";
      inputTxtaaa.value   =   document.getElementById("aaa"+num).value;
      inputTxtaaa.name   =   "txt"+count;
      var   inputTxtaaaa   =   document.createElement("input");
      inputTxtaaaa.type   =   "text";
      inputTxtaaaa.value   =   document.getElementById("aaaa"+num).value;
      inputTxtaaaa.name   =   "txt"+count;
      var   btn   =   document.createElement("input");
      btn.type   =   "button";
      btn.value   =   "删除";
      btn.onclick   =   function()
      {
        this.parentNode.parentNode.removeChild(this.parentNode);

        var n = File1.getElementsByTagName("div");
        for(var k=0; k<n.length; k++)
        {
            n[k].firstChild.nodeValue = "文本框"+(k+1);
        }
        count -= 1;
      }

      div.appendChild(countTxt);
      div.appendChild(inputTxt);
      div.appendChild(inputTxta);
      div.appendChild(inputTxtaa);
      div.appendChild(inputTxtaaa);
      div.appendChild(inputTxtaaaa);
      div.appendChild(btn);
      File1.appendChild(div);
}
    </script>
<div   id="file1"> </div>

<input   name="xiyaoname"   id="1"   value="Add"   type="button"   οnclick="Add(1);"   />
<input   name="hiddenField"   type="hidden"   id="a1"   value="sex"   />
<input   name="hiddenField"   type="hidden"   id="aa1"   value=" birthday"   />
<input   name="hiddenField"   type="hidden"   id="aaa1"   value="shenggao"   />
<input   name="hiddenField"   type="hidden"   id="aaaa1"   value="tizhong"   />
</body>
</html>
 
phphot
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript 动态添加/删除 文本框
02-18
可以动态的添加 删除 文本框！代码几乎不用修改就直接能用，简单方便
javascript动态添加删除文本框
Beaver‘s
03-07 260
[code="java"] Insert title here var count = 0; function Add(){ count += 1; var File1 = document.getElementById("file1"); var div = document.createElement("div"); var cou...
用javascript动态添加和删除文本框
思科网络
09-01 1214
用javascript动态添加和删除文本框 script   language="javascript">                                     function   add()                                     {           option   =   new   Array();    
动态添加、删除文本框
炉火纯青
12-20 876
<br />动态添加、删除文本框，很实用！<br /><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <br /><html xmlns="http://www.w3.org/1999/xhtml"> <br /><head> <br /><title> new document </title> <br /></
动态添加和删除文本框
rigger21
06-07 190
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"&gt; &lt;HTML&gt; &lt;HEAD&gt; &lt;TITLE&gt; New Document &lt;/TITLE&gt; &lt;/HEAD&gt; &lt;BODY&gt; &lt;input nam
JavaScript实现统计文本框Textarea字数增强用户体验
12-04
`onkeydown`事件会在用户按下键盘键时触发，而`onkeyup`事件则在用户释放键盘键时触发，这两个事件结合起来可以确保每次字符的添加或删除都能被准确地捕捉到。 首先，我们需要在HTML中创建一个`<textarea>`元素，...
jquery动态生成文本框，含删除按钮
10-17
本案例聚焦于使用jQuery动态生成文本框，并且每个文本框都配备有删除按钮。这个功能常见于需要用户输入多条类似信息的场景，如在线表单或任务管理器。 首先，`demo.html`和`demo_1.html`是两个不同的示例页面，展示...
利用js实现前台动态添加文本框,后台获取文本框内容(示例代码)
10-26
在本文中，我们将深入探讨如何使用JavaScript（js）在前端动态添加文本框，并在后端获取这些文本框的内容。这是一个常见的需求，特别是在构建交互式Web应用程序时，用户可能需要输入多个相似的数据项。 首先，我们...
文本框添加文字标签.rar_humandwe_文本框添加文字标签
09-21
在"表单文本框添加文字标签"的实现中，jQuery可以高效地处理元素的选择、添加、删除以及动态更新，使得这个功能的实现更加简洁和高效。 实现这个功能的基本步骤可能包括以下几点： 1. **选择元素**：首先，你需要...
Js实现动态插入删除文本框
于大大大洋
11-10 2501
Untitled Document var qus = new Array(); function Question() { this.qno = qus.length; this.ono = 0; this.create = function(table) { var qstr = ""; qstr += "问题  " + (
js动态生成文本框并有删除功能
11-23
js动态生成文本框并有删除功能js动态生成文本框并有删除功能
JS 实现动态插入输入框以及删除、位置调换
04-07
JS 实现动态插入输入框以及删除、位置调换
JS动态添加文本框.html
07-14
JS动态添加文本框.html DEMO实例。
js动态的在页面上增加或删除一个文本框
dusea的博客
08-31 3834
转自http://www.5xsj.net/program/8/22/297.html js动态的在页面上增加或删除一个文本框 <!-- var textNumber = 1; function addTextBox(form, afterElement) { // Increment the textbox number textNumber++; // Create
js动态的在页面上增加或删除三个文本框并换行
csdy08的博客
08-22 769
&lt;html&gt; &lt;head&gt; &lt;title&gt;js动态的在页面上增加或删除一个文本框&lt;/title&gt; &lt;script type="text/javascript"&gt; &lt;!-- var textNumber = 1; function addTextBox(form, afterElement) { // Increment the..
js添加删除文本框
huangxinyu_it的专栏
12-23 2223
var count = 1; //用来判断是删除 还是增加按钮 以便count值进行计算 function checkCount(boolOK, coun) { if (boolOK == true) { return count++; } else {
原生js删除提示文本框（操作已有DOM元素）隔一段时间后自动消失-setTimeout
u010234868的专栏
08-05 220
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #box { width: 150px; height: 50px; line-height: 50px; background-color: pink; margin: 200px auto; .
Js中文本框的动态添加 展示文本 清空内容
IT666DHW的博客
10-08 3655
动态添加删除   题目描述：           1. 点击增加，可以动态添加一行文本框           2. 点击展示文本，可以alert弹出当前所有文本框内的内容           3. 点击清空内容，清空当前所有文本框的内容 --> //给 添加按钮 添加点击事件的add()函数 var val = 4; function add(){   //1. 创建输入
使用javascript实现一个简单的能插入删除信息的表格
最新发布
tcugg的博客
08-23 182
能通过用户实时输入在表格里添加一些基本信息，当有信息为空时弹出窗口提示信息不能为空，当点击后面的删除是能将信息进行删除。
JavaScript添加一个文本框并带有删除按钮
05-30
您可以通过以下代码在HTML中添加一个文本框和一个删除按钮： ```html ()">删除 ``` 然后在JavaScript中定义一个名为`clearText()`的函数，以清除文本框中的内容： ```javascript function clearText() { ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值