重複錶行，並更改輸入選擇名稱

Question

我有這個表：

<table class="table table-bordered" style="width: 50%;" id="tabella"> 
      <tbody><tr> 
       <td><b>Sub Family name</b> 
        <input type="text" id="nome.0" name="nome.0" class="form-control" value=""> 
      </td> 
      <td> 
       <b>Family</b> 
       <select id="famiglia.0" name="famiglia.0"> 
        <option></option> 
        <option value="1">01_PATINATE</option> 

<option value="2">02_BRISTOL</option> 

       </select> 
      </td> 
      <td> 
       <b>Original format</b> 
       <select name="form_carta_orig.0" id="form_carta_orig.0"> 
        <option></option> 
        <option value="1">15x20</option><option value="3">70x100</option><option value="4">30x50</option>     </select> 
      </td> 
      <td> 
        <table class="table table-bordered"><tbody><tr><td style="background-color:#eee;"><b>GR</b></td><td style="text-align:center;background-color:#eee;"><b>70</b></td><td style="text-align:center;background-color:#eee;"><b>100</b></td><td style="text-align:center;background-color:#eee;"><b>120</b></td><td style="text-align:center;background-color:#eee;"><b>150</b></td><td style="text-align:center;background-color:#eee;"><b>200</b></td><td style="text-align:center;background-color:#eee;"><b>34</b></td><td style="text-align:center;background-color:#eee;"><b>16</b></td></tr><tr><td style="text-align:center;background-color:#eee;"></td><td style="text-align:center;background-color:#eee;"><input type="checkbox" name="val_0[]" value="70"></td><td style="text-align:center;background-color:#eee;"><input type="checkbox" name="val_0[]" value="100"></td><td style="text-align:center;background-color:#eee;"><input type="checkbox" name="val_0[]" value="120"></td><td style="text-align:center;background-color:#eee;"><input type="checkbox" name="val_0[]" value="150"></td><td style="text-align:center;background-color:#eee;"><input type="checkbox" name="val_0[]" value="200"></td><td style="text-align:center;background-color:#eee;"><input type="checkbox" name="val_0[]" value="34"></td><td style="text-align:center;background-color:#eee;"><input type="checkbox" name="val_0[]" value="16"></td></tr></tbody></table> 
      </td> 
     </tr> 
    </tbody></table> 

我試圖用這個功能來複制行jQuery的：

var i = 1; 
$("#aggiungi").click(function() { 
    $("#tabella tr:first").clone().find("input").each(function() { 
     $(this).val('').attr('id', function(_, id) { return id + i }); 
     var $tr = $(this).closest('tr'); 
     var $clone = $(lastTr).clone(); 
     var allTrs = $tr.closest('table').find('tr'); 
     console.log(allTrs); 
     var lastTr = allTrs[allTrs.length-1]; 
     //alert(lastTr); 

這裏是我惹禍...

  $clone.find('td').each(function(){ 
      var el = $(this).find(':first-child'); 
      alert(el); 
      var id = el.attr('id') || null; 
      alert(id); 
      if(id) { 
       var a = id.substr(id.length-1); 
       var prefix = id.substr(0, (id.length-1)); 
       alert(prefix); 
       el.attr('id', prefix+(a)); 
       el.attr('name', prefix+(+a+1)); 
      } 
     }); 
     $clone.find('input:text').val(''); 
     $tr.closest('table').append($clone); 
    }).end().appendTo("#tabella"); 
    i++; 
}); 

我可以克隆行...但我不能正確地更改輸入名稱... 我不知道爲什麼...

Answer 1

您試圖在聲明前調用變量。將var $ clone置於var lastTr

var $clone = $(lastTr).clone(); 
var allTrs = $tr.closest('table').find('tr'); 
console.log(allTrs); 
var lastTr = allTrs[allTrs.length-1];