Question

基于提出的问题Generalizing jQuery dynamic add/remove form input for multiple forms。我能够在我的项目中添加几个功能，但无法在不使按钮消失的情况下克隆输入字段。

我尝试使用jquery clone div and append it after specific div克隆整个div，但仍未成功。

所以我的问题是如何克隆输入字段和按钮而不会使先前克隆元素的按钮（'add'，'cancel'和'save'）消失。单击ADD按钮后，最后一个元素的所有三个按钮都应保留。

这是我尝试过的：jsfiddle

以下是java脚本：

 $(document).ready(function() {
    $("#table1").hide();
    $("#table2").hide();
    $("#services").click(function(){
        $("#table1").slideToggle();
        $("#table2").hide();
        $("#cctable tr").attr('class', 'dinput');
        $("#dbtable tr").attr('class', 'dbinput');
        $('.btnDel').attr('disabled','disabled');
    });

    $("#products").click(function(){
        $("#table2").slideToggle();
        $("#table1").hide();
        $("#dbtable tr").attr('class', 'dinput');
        $("#cctable tr").attr('class', 'ccinput');
        $('.btnDel').attr('disabled','disabled');
    });
    $('.btnAdd').click(function() {

        var num     = $('.dinput').length; // how many "duplicatable" input fields we currently have
        var newNum  = new Number(num + 1);      // the numeric ID of the new input field being added

        // create the new element via clone(), and manipulate it's ID using newNum value
        var newElem = $('.dinput:last').clone();

        // insert the new element after the last "duplicatable" input field
        $('.dinput:last').after(newElem);
        $(".dinput:last td:first").replaceWith( "<td>" + newNum + "</td>" );

        // enable the "remove" button
        $('.btnDel').attr('disabled','');


        // business rule: you can only add 10 names
          if (newNum == 10)
            $('.btnAdd').attr('disabled','disabled');
    });

    $('.btnDel').click(function() {
        var num = $('.dinput').length; // how many "duplicatable" input fields we currently have
        $('.dinput:last').remove();     // remove the last element

        // enable the "add" button
        $('.btnAdd').attr('disabled','');

        // if only one element remains, disable the "remove" button
        if (num-1 == 1)
            $('.btnDel').attr('disabled','disabled');
    });


});

Answer 1

更新了FIDDLE

<强> HTML

    <h2 align="center">Add Services And Products To Your Proposal</h2>
<div id="whole">
    <div id="tablebuttons">
        <input type="button" value="Add Services"id="services"  > 
        <input type="button" value="Add Products"id="products" >
    </div>
    <div id="table1">

        <form id="ccards" method="post">
            <table cellspacing="5">
                <tr>
                    <th></th>
                    <th align="center">Name:</th>
                    <th align="center">Description:</th>
                    <th align="center">Action:</th>
                </tr>
                    <tbody id ="cctable" >
                        <tr class="ccinput">
                            <td> 1 </td>
                            <td> <input type="text" name="cc_ser[]" id="name" maxlength="20"/> </td> 
                            <td> <textarea name= "txt[]"></textarea> </td>

                            <td>
                              <input type="button" class="btnAdd" id="add" value="Add" onclick="addrow()" />
            <input type="button" class="btnDel" value="Cancel" id="btnDel" onclick="removerow(this)" />
            <input type="button" name="save" value="Save" id="save" />                                   
                            </td>
                        </tr>
                    </tbody>
            </table>
        </form>
    </div>

    <div id="table2">

        <form id="ccards" method="post">
            <table cellspacing="5">
                <tr>
                    <th></th>
                    <th align="center">Name:</th>
                    <th align="center">Description:</th>
                    <th align="center">Action:</th>
                </tr>
                    <tbody id ="dbtable" >
                        <tr class="dbinput">
                            <td> 1 </td>
                            <td> <input type="text" name="db_pro[]" id="name" maxlength="20"/> </td> 
                            <td> <textarea name= "txt[]"></textarea> </td>
                            <td>
                              <input type="button" class="btnAdd" onclick="addrow();" id="add" value="Add" />
            <input type="button" class="btnDel" value="Cancel" onclick="removerow(this);" id="btnDel" />
            <input type="button" name="save" value="Save" id="save" />                                   
                            </td>
                        </tr>
                    </tbody>
            </table>

        </form>
    </div>
</div>

<强> Jquery的

    $(document).ready(function() {
        $("#table1").hide();
        $("#table2").hide();
        $("#services").click(function(){
            $("#table1").slideToggle();
            $("#table2").hide();
            $("#cctable tr").attr('class', 'dinput');
            $("#dbtable tr").attr('class', 'dbinput');
            $('#btnDel').attr('disabled','disabled');
        });

        $("#products").click(function(){
            $("#table2").slideToggle();
            $("#table1").hide();
            $("#dbtable tr").attr('class', 'dinput');
            $("#cctable tr").attr('class', 'ccinput');
            $('#btnDel').attr('disabled','disabled');
        });

    });

function addrow()
{
            var num     = $('.dinput').length; // how many "duplicatable" input fields we currently have
            var newNum  = new Number(num + 1);      // the numeric ID of the new input field being added

            // create the new element via clone(), and manipulate it's ID using newNum value
            var newElem = $('.dinput:last').clone();

            // insert the new element after the last "duplicatable" input field
            $('.dinput:last').after(newElem);
            $(".dinput:last td:first").replaceWith( "<td>" + newNum + "</td>" );
if (newNum > 1)
            // enable the "remove" button
            $(newElem).find('.btnDel').attr('disabled','');


            // business rule: you can only add 10 names
              if (newNum == 10)
                $('.btnAdd').attr('disabled','disabled');
}

function removerow(sender)
{
            $(sender).parent().parent().remove();
}

Answer 2

更新：http://jsfiddle.net/YRwmB/3/

您需要添加以下行：newElem.find("input").val('');才能生效。

使用jquery克隆div

2 个答案: