Javascript 使用jquery克隆div

根据提出的问题。我可以在我的项目中添加一些功能，但在不使按钮消失的情况下无法克隆输入字段

我尝试使用克隆整个div，但仍然没有成功

因此，我的问题是，如何才能在不使以前克隆的元素的按钮（“添加”、“取消”和“保存”）消失的情况下克隆输入字段和按钮。单击ADD按钮后，最后一个元素的所有三个按钮都应保留

以下是我尝试过的：

以下是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');
    });


});

$（文档）.ready（函数（）{
$（“#表1”）.hide（）；
$（“#表2”）.hide（）；
$（“#服务”）。单击（函数（）{
$（“#表1”）.slideToggle（）；
$（“#表2”）.hide（）；
$（“#cctable tr”）.attr（'class'，'dinput'）；
$（“#dbtable tr”）.attr（'class'，'dbinput'）；
$（'.btnDel'）.attr（'disabled'，'disabled'）；
});
$（“#产品”）。单击（函数（）{
$（“#表2”）.slideToggle（）；
$（“#表1”）.hide（）；
$（“#dbtable tr”）.attr（'class'，'dinput'）；
$（“#cctable tr”）.attr（'class'，'ccinput'）；
$（'.btnDel'）.attr（'disabled'，'disabled'）；
});
$（'.btnAdd'）。单击（函数（）{
var num=$（'.dinput'）.length；//当前有多少个“可复制”输入字段
var newNum=newnumber（num+1）；//正在添加的新输入字段的数字ID
//通过clone（）创建新元素，并使用newNum值操纵其ID
var newElem=$（'.dinput:last'）.clone（）；
//在最后一个“可复制”输入字段后插入新元素
$（'.dinput:last'）。在（newElem）之后；
$（“.dinput:last td:first”）.replace为（“+newNum+”）；
//启用“删除”按钮
$（'.btnDel'）.attr（'禁用'，''）；
//业务规则：只能添加10个名称
如果（newNum==10）
$（'.btnAdd'）.attr（'disabled'，'disabled'）；
});
$（'.btnDel'）。单击（函数（）{
var num=$（'.dinput'）.length；//当前有多少个“可复制”输入字段
$（'.dinput:last'）.remove（）；//删除最后一个元素
//启用“添加”按钮
$（'.btnAdd'）.attr（'禁用'，''）；
//如果只剩下一个元素，请禁用“删除”按钮
如果（num-1==1）
$（'.btnDel'）.attr（'disabled'，'disabled'）；
});
});

更新：

您需要添加以下行：

newElem.find（“input”）.val（“”）以使其工作。
已更新

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>

将服务和产品添加到您的提案中
姓名：
说明：
行动：
1.
姓名：
说明：
行动：
1.

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();
}

$（文档）.ready（函数（）{
$（“#表1”）.hide（）；
$（“#表2”）.hide（）；
$（“#服务”）。单击（函数（）{
$（“#表1”）.slideToggle（）；
$（“#表2”）.hide（）；
$（“#cctable tr”）.attr（'class'，'dinput'）；
$（“#dbtable tr”）.attr（'class'，'dbinput'）；
$（'btnDel'）.attr（'disabled'，'disabled'）；
});
$（“#产品”）。单击（函数（）{
$（“#表2”）.slideToggle（）；
$（“#表1”）.hide（）；
$（“#dbtable tr”）.attr（'class'，'dinput'）；
$（“#cctable tr”）.attr（'class'，'ccinput'）；
$（'btnDel'）.attr（'disabled'，'disabled'）；
});
});
函数addrow（）
{
var num=$（'.dinput'）.length；//当前有多少个“可复制”输入字段
var newNum=newnumber（num+1）；//正在添加的新输入字段的数字ID
//通过clone（）创建新元素，并使用newNum值操纵其ID
var newElem=$（'.dinput:last'）.clone（）；
//在最后一个“可复制”输入字段后插入新元素
$（'.dinput:last'）。在（newElem）之后；
$（“.dinput:last td:first”）.replace为（“+newNum+”）；
如果（newNum>1）
//启用“删除”按钮
$（newElem）.find（'.btnDel'）.attr（'disabled'，''）；
//业务规则：只能添加10个名称
如果（newNum==10）
$（'.btnAdd'）.attr（'disabled'，'disabled'）；
}
函数（发送器）
{
$（发件人）.parent（）.parent（）.remove（）；
}
在fiddle中的html代码中，
.dinput
在哪里？你在说哪个按钮？@umair请看我编辑的问题！因此，您希望
克隆
3个按钮
以及
每个tr
？因为这些按钮不是表的一部分。它们位于单独的分区中。您可以将这些按钮添加到元素中，以使用文本字段克隆它们。请参阅我编辑的问题。按钮仍然消失在你的小提琴上。你把它拉近了，但是，如果我做的行数达到1，你能不能禁用“取消”按钮。谢谢你，伙计，你宝贵的时间回答我的问题