克隆格使用jquery

Question

基於問題Generalizing jQuery dynamic add/remove form input for multiple forms。我能夠在我的項目中添加多個功能，但無法在不使按鈕消失的情況下克隆輸入字段。

我試圖用jquery clone div and append it after specific div克隆整個div，但仍然不成功。

所以我的問題是我怎麼能克隆與按鈕一起輸入字段未做按鈕（「添加」，「取消」和「保存」）的先前克隆元素消失。點擊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('');這個工作。