Question

我正在创建一个动态表单，允许用户动态添加字段。因此可以添加两个字段。其中一个字段是另一个字段的子集。喜欢这个

Category 1
 1. field1
 2. field2
Category 2
 1. field1
 2. field2
 3. field3

用户应该能够添加两个类别以及其中的字段。

这就是我到目前为止所提出的。 http://jsbin.com/mufidu/2/edit?html,js,output

Javascript部分：

cgCnt = 1;
cpCnt = 1;
function add_cg(cgId){
    cgCnt = cgCnt+1;
    var cgOriginal = document.getElementById(cgId);
    var cgClone = cgOriginal.cloneNode(true);

    cgClone.id = "cg" + cgCnt;
    cgOriginal.parentNode.appendChild(cgClone);
    var cpInCg = cgClone.getElementByTagName("div");
    cpInCg.id = "cg"+cgCnt+"cp1";   
}
function add_cp(addCpId, addCgId){
    cpCnt = cpCnt + 1;
    var cpOriginal = document.getElementById(addCpId);
    cpClone = cpOriginal.cloneNode(true);
    cpClone.id = addCgId+"cp"+cpCnt;
    cpOriginal.parentNode.appendChild(cpClone);
}

HTML部分：

<form>
    <div id="cg1">
        <input type="text" placeholder="covergroup"\>
        <input type="button" style="position: relative;" value = "+" onClick="add_cg(this.parentNode.id)">
        <!<input type="button" id="removeCgCp" style="position:relative;" value = "-" onClick="remove_cg(this.parentNode.id)">
        <br /><br />
        <div id="cg1cp1">
            <input type="text" placeholder="coverpoint" style="position:relative; left:50px">
            <input type="button" style="position: relative; left:50px" value="+" onClick="add_cp(this.parentNode.id , this.parentNode.parentNode.id)">
        </div>
    </div>
</form>

它或多或少地按照我希望的方式工作，但在创建新类别后，当我尝试在该类别中创建和添加其他字段时，它们将被添加到第一个类别中。我已经发布了一些警告声明，看看发生了什么，并想出了这些行

var cpInCg = cgClone.getElementByTagName("div");
cpInCg.id = "cg"+cgCnt+"cp1";

没有像我预期的那样运作。我试图在克隆后更改子类别字段的ID（因为此ID与原始ID相同）。但是我的警告声明告诉我这个id没有改变。

有更好的方法吗？

感谢。

P.S：我还不知道jQuery，刚开始学习Javascript。

无法使用Javascript在表单中创建div元素的嵌套复制

0 个答案: