使用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>

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

删除倒数第一个"input1".
删除
.

不知道你对这些代码的意思了解不
[code="java"]
function AddElement(mytype){

var TemO=document.getElementById("add"); //获取add也就是你底下命名为add的div
var newInput = document.createElement("input");

//创建一个input标签
newInput.type=mytype; //input标签的类型为你传递上来的参数mytype
newInput.id="input1"; //input 标签的ID名为input1

    TemO.appendChild(newInput);   //在add的div里面增加一个子节点(也就是上面你创建的input标签)

    var newline= document.createElement("br");  //创建一个换行符 
    TemO.appendChild(newline);   //在add的div子节点上增加这个换行符号
}   

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

    var newInput = document.getElementById("input1");    
       //获取id为input1的对象
    TemO.removeChild(newInput);   
       //在temo中移除他
    var newline= document.getElementById("br");   
    TemO.removeChild(newline);   //移除换行
}

有些问题可能是你增加的名称全部为input1造成的,你可以试着改下
[/code]

你可以拷贝到dreamweaver运行一下看是不是你想要的答案。动态的添加，删除table行

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

无标题文档
var n = 1 ; function testAdd() { var tr = document.getElementById( "xxx" ).insertRow( 1 ); tr.id = " new_ " + n; var c1 = tr.insertCell(); c1.innerText = " xxx " + n; var c2 = tr.insertCell(); c2.innerText = " bbb " ; var c3 = tr.insertCell(); c2.innerText = " EE " ; n ++ ; } function doDelete(i) { var _tableObj = document.getElementById("xxx"); var rowIndex = event.srcElement.parentElement.parentElement.rowIndex; _tableObj.deleteRow(rowIndex); }

veryd good