使用js动态增加删除表单元素

javaeye 写道

这几天我一直在做数据采集工作，又一次发现我同事在展示我的数据的时候，使用了一些动态增加表单元素。我发现这很好玩，所以我也试着找了些资料和加上自己的整理，整出了以下一张网页。可以动态的增加和删除表单元素，但是有些不足，不能删除上次添加的，若删除后，在添加就不能在删除的位置上添加，还有我只在IE下测试通过。这个我不知道怎么做，主要是没有时间去研究，如果有哪位告诉可以留言留言。让俺也学习下。O(∩_∩)O

<html>

    <head>

        <title>动态添加表单元素


        </title>

    </head>

    <script language="javascript">

function AddElement(mytype){
    var TemO=document.getElementById("add");
    var newInput = document.createElement("input"); 

    newInput.type=mytype; 
    newInput.id="input1";

    TemO.appendChild(newInput);

    var newline= document.createElement("br");
    TemO.appendChild(newline);
}

function delElement(mytype){
    var TemO=document.getElementById("add");

    var newInput = document.getElementById("input1"); 

    TemO.removeChild(newInput);

    var newline= document.getElementById("br");
    TemO.removeChild(newline);
}
&lt;/script&gt;
&lt;body&gt;
    &lt;input name="" type="button" value="新建文本框"&gt;
    &lt;input name="" type="button" value="新建复选框"&gt;
    &lt;input name="" type="button" value="新建单选框"&gt;
    &lt;input name="" type="button" value="新建文件域"&gt;
    &lt;input name="" type="button" value="新建密码框"&gt;
    &lt;input name="" type="button" value="新建提交按钮"&gt;
    &lt;input name="" type="button" value="新建恢复按钮"&gt;
    &lt;input name="" type="button" value="删除恢复按钮"&gt;  
        <br />
    &lt;form name="frm" method="get" action=""&gt;
        <div id="add">
            &lt;input name="textfield" type="text"&gt;
            <br />
        </div>
    &lt;/form&gt;
&lt;/body&gt;


</html>

写回答
好问题 0 提建议
追加酬金
关注问题
分享
邀请回答
编辑收藏删除结题
收藏举报

5条回答默认最新

关注

码龄粉丝数原力等级 --

被采纳

被点赞

采纳率
Chris-Hsu 2008-11-14 18:21
关注
[quote] </p> <pre><code>function AddElement(mytype){ var TemO=document.getElementById("add"); var newInput = document.createElement("input"); newInput.type=mytype; newInput.id="input1"; </code></pre> <p>[color=red]//在这里作者作用了input1作为Id，这样一来每添加一个元素，都是相同的Id，这样不太好，删除方法中查找元素时采用getElementById("input1")，不知道是要删除哪个元素[/color]</p> <pre><code> TemO.appendChild(newInput); var newline= document.createElement("br"); </code></pre> <p>[color=red]//在这里作者作创建了一个<br/>元素，但这里只是单纯创建它，是不符合上下文逻辑的，因为下面删除方法中查找<br/>元素时，是采用getElementById()的形式，应该为它加上Id[/color]</p> <pre><code> TemO.appendChild(newline); } function delElement(mytype){ var TemO=document.getElementById("add"); var newInput = document.getElementById("input1"); TemO.removeChild(newInput); var newline= document.getElementById("br"); TemO.removeChild(newline); } </script> [/quote] </code></pre> <p>将以上代码作如下修改后，你再试试看！！！</p> <p>[quote]<script language="javascript"><br><br> var elementCount = 0;<br><br> function AddElement(mytype){<br><br> var TemO=document.getElementById("add");<br><br> var newInput = document.createElement("input"); </p> <pre><code> elementCount = elementCount + 1; newInput.type=mytype; newInput.id="input"+(elementCount); TemO.appendChild(newInput); var newline= document.createElement("br"); newline.id = "br"+(elementCount); TemO.appendChild(newline); } function delElement(mytype){ var TemO=document.getElementById("add"); if (elementCount>0){ var newInput = document.getElementById("input"+elementCount); TemO.removeChild(newInput); var newline= document.getElementById("br"+(elementCount)); elementCount = elementCount - 1; TemO.removeChild(newline); } } </script> [/quote] </code></pre> <p>！！！！（注：是即时修改，所以不算是最优的解决方法，如果你想要，可以给我留言，我抽时间给你写一个。）</p>

本回答被题主选为最佳回答 , 对您是否有帮助呢?

解决无用
评论打赏
分享
举报

评论

按下Enter换行，Ctrl+Enter发表内容

查看更多回答(4条)

报告相同问题？

关注问题

使用js动态增加删除表单元素
2008-11-14 14:55

回答 5 已采纳 [quote] [/quote] 将以上代码作如下修改后，你再试试看！！！ [quote] [/quote] ！！！！（注：是即时修改，所以不算是最优的解决方法，如果你想要，可
从html表单添加和删除元素的最佳方法 html javascript jquery php
2014-10-27 06:07

回答 2 已采纳 You do not want to remove(), instead you want to hide(). $(document).ready(function(){ $("#5"
如何运用表单元素将成绩录入然后再点击删除 html javascript 前端
2022-12-14 14:21

回答 3 已采纳功能可以实现，如果格式有要求，改下css就行了 <!DOCTYPE html> <html lang="en"> <head> <meta chars
js使用removeChild方法动态删除div元素
2020-12-12 16:15

一定要注意j变量从大往小循环，否则，删除div元素后会引起serchResultLenth=serchResult.children.length;长度的变化（这个问题摸索了好久，才搞定，切记） for(var j=serchResultLenth-1;j>=0;j--){ var ...
js获取追加的数组元素 javascript
2022-10-09 13:02

回答 2 已采纳已解决
css+html+js 实现登陆页面 html5 javascript jquery 有问必答
2021-06-22 20:08

回答 1 已采纳很多东西，哪里思路不会？可以把具体不会的地方，说出来，可以给你分析
为什么点第三行的删除弹出来的却是2？是第二行没有算在表格里面吗？代码该怎么改？ css html5 javascript
2020-05-11 18:13

回答 1 已采纳从你的代码上来看，找到的是表格对应的某行，这行的索引值是从0开始计算的，第一行的索引值是0，so第三行的索引值是2
jQuery表单元素动态增加删除特效代码
2021-03-20 03:49

jQuery表单元素动态增加删除代码是一款基于addel.js插件实现的动态表单增删特效。
关于element-ui中<span>标签与级联选择器<el-cascader>的对齐问题 html5 javascript vue.js
2021-03-25 12:10

回答 3 已采纳我试了你的代码是在一行的,你可以检查一下.el-cascader,看看他的样式是不是行内块
Vue TS, 会者不难，难则不会，这代码自已都被绕晕了，请教 vue.js 前端有问必答
2022-06-17 01:42

回答 4 已采纳题主先看这个计算td原始rowindex和cellindex的代码，鼠标移动等有空再看下，应该还可以优化 Vue 获取 table表格中某个 td DOM 的
函数调用问题，请各位兄弟帮忙！ javascript
2011-01-04 10:10

回答 3 已采纳你用的是ie什么版本？调试一下比较好，看到底当时运行的堆栈，还有这个方法名为什么不存在之类的具体错误信息。
Js 动态生成表单及其删除表单元素
2022-08-16 16:17

有点苏的博客 Js创建动态数据表单
如何从一个gridpanel获取数据在另一个gridpanel显示？ javascript
2009-07-20 10:19

回答 15 已采纳 [quote]var sm1= new Ext.grid.CheckboxSelectionModel( /* listeners:{ 'rowselect':functi
jQuery表单元素动态增加删除代码.zip
2019-07-05 00:29

jQuery表单元素动态增加删除代码是一款基于addel.js插件实现的动态表单增删特效。
js 动态添加删除表单元素
2020-10-21 12:26

早起虫子的博客 <form id="form" role="form" method="post" class="custom-control"> <div class="form-inline"> <label for="details" class="custom-control-label col-md-2">还款明细<...
没有解决我的问题, 去提问

悬赏问题

¥15 素材场景中光线烘焙后灯光失效
¥15 请教一下各位，为什么我这个没有实现模拟点击
¥15 执行 virtuoso 命令后，界面没有，cadence 启动不起来
¥50 comfyui下连接animatediff节点生成视频质量非常差的原因
¥20 有关区间dp的问题求解
¥15 多电路系统共用电源的串扰问题
¥15 slam rangenet++配置
¥15 有没有研究水声通信方面的帮我改俩matlab代码
¥15 ubuntu子系统密码忘记
¥15 保护模式-系统加载-段寄存器

使用js动态增加删除表单元素

5条回答 默认 最新

悬赏问题

5条回答默认最新