Jquery克隆div里面的形式

时间:2015-02-06 11:03:16

标签: javascript jquery html

我正在尝试在表单内复制带有内容的div。但每次它都在表格之外克隆。

<form>
    <div class="avail" style="border:1px solid #cccccc; padding:3px;">
        <div id="id">Tip dispozitiv:
            <select name="tip" id="tip" class="tip" cnt="senzori">
                <option value="NA" selected="selected">---</option>
            </select>
            <br/>
            <select id="senzori" name="senzori" style="border:1px solid #cccccc;">
                <option selected="selected">---</option>
            </select>x
            <input type="text" name="ctr_bucati" size="2" value="1">Bucati
            <div style="display:inline-block; margin-left:300px;"><a href="#" id="rem" class="rem">X</a>
            </div>
        </div>
    </div>
</form>
<input type="submit" value="+" id="copy" />
$("#copy").click(function (e) {
    var avails = $(".avail");
    var cnt = avails.length + 1;
    avails.eq(0).clone().insertBefore(this).find("div").attr("id", "id" + cnt).find("#senzori").attr("id", "senzori" + cnt);
    $("#id" + cnt).find("#tip").attr("cnt", "senzori" + cnt);
    $("#senzori" + cnt).find('option').remove().end().append('<option value="NA">---</option>').val('NA');
    e.preventDefault();
});

任何线索我怎么能让它保持相同的形式而不是后来的?#/ p>

3 个答案:

答案 0 :(得分:1)

而不是使用insertBefore(this)

使用.appendTo(avails.parent())

WORKING DEMO

答案 1 :(得分:1)

在表单中添加一个id并将div附加到表单

<form id="myform">

var myDiv = $(".avail");

$("#myform").append(myDiv);

答案 2 :(得分:0)

或者你可以通过移动&#34; +&#34;来修改HTML而不是JS代码。按钮进入表格:

<form>
    <!-- ... -->
    <input type="submit" value="+" id="copy" />
</form>

演示: http://jsfiddle.net/yoxn0j4g/