具有獨立值的克隆行

Question

我遇到了一些問題。我有以下兩張表

<table id="customFields1" class="table table-bordered table-hover additionalMargin alignment"> 
    <thead> 
    <tr> 
     <th colspan="2"></th> 
     <th>Some Title</th> 
    </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td><label class="subjectline" for="User1">User NOC M1</label></td> 
      <td id="slLabel">SL_A</td> 
      <td id="slInput"><input type="text" name="slOptions[User][NOC M1]" class="form-control" id="User1"></td> 
      <td><a class="addCF" href="javascript:void(0);">+ additional user</a></td> 
     </tr> 

    </tbody> 
</table> 

<table id="customFields2" class="table table-bordered table-hover additionalMargin alignment"> 
    <thead> 
    <tr> 
     <th colspan="2"></th> 
     <th>Some Title</th> 
    </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td><label class="subjectline" for="User1">User NOC M1</label></td> 
      <td id="slLabel">SL_A</td> 
      <td id="slInput"><input type="text" name="slOptions[User][NOC M1]" class="form-control" id="User1"></td> 
      <td><a class="addCF" href="javascript:void(0);">+ additional user</a></td> 
     </tr> 
    </tbody> 
</table> 

兩者都有一個addCF按鈕。這用於向表中添加一個新行。這是通過這個實現的

$(function() { 
    alp = "A"; 
    regexp = /[_A]+$/; 

    $(".addCF").click(function(){ 
     alp = (alp.substring(0,alp.length-1)+String.fromCharCode(alp.charCodeAt(alp.length-1)+1)); 
     var clone = $(this).closest('tr').clone(true); 

     var inputOrgLabel = $("td:nth-child(2)", clone).html(); 
     inputOrgLabel = inputOrgLabel.replace(regexp,''); 
     $("td:nth-child(2)", clone).html(inputOrgLabel+'_'+alp); 

     $("td:first-child", clone).empty(); 
     $("td:last-child", clone).html('<a href="javascript:void(0);" class="remCF">Remove</a>'); 
     clone.insertAfter($(this).closest('table').find('tr:last')); 
    }); 
    $("table.table").on('click','.remCF',function(){ 
     $(this).parent().parent().remove(); 
    }); 
}); 

除了一件事情之外，一切似乎都奏效。如果我添加一個新行，我將標籤SL_A更改爲SL_B。添加的每一行都在其末尾添加了字母表中的下一個字母。這是行得通的，但如果我在表1中添加一行，使其成爲SL_B，然後在表2中添加一行，則表2中的行具有SL_C。每個字母增量應該是獨立的，所以表2中的第二行也應該有SL_B。

這可能嗎？我已成立了一個JSFiddle證明

感謝

Answer 1

我已經在高山牽着你的數據的陣列和相應的改變。在這裏，我可以得到單擊按鈕的索引，以使用該索引作爲apl數組的索引。

$(function() { 
    alp = []; 
    $.each($('.addCF'), function(i,v) { 
     alp[i] = "A"; 
    }) 

    regexp = /[_A]+$/; 

    $(".addCF").click(function(e){ 
    index = $('.addCF').index($(this)); 
     alp[index] = (alp[index].substring(0,alp[index].length-1)+String.fromCharCode(alp[index].charCodeAt(alp[index].length-1)+1)); 
     var clone = $(this).closest('tr').clone(true); 

     var inputOrgLabel = $("td:nth-child(2)", clone).html(); 
     inputOrgLabel = inputOrgLabel.replace(regexp,''); 
     $("td:nth-child(2)", clone).html(inputOrgLabel+'_'+alp[index]); 

     $("td:first-child", clone).empty(); 
     $("td:last-child", clone).html('<a href="javascript:void(0);" class="remCF">Remove</a>'); 
     clone.insertAfter($(this).closest('table').find('tr:last')); 
    }); 
    $("table.table").on('click','.remCF',function(){ 
     $(this).parent().parent().remove(); 
    }); 
}); 

注意：您必須管理刪除代碼，因爲它不會重置該值。