独立した値を持つ行のクローン

Question

何か問題があります。私は次の2つのテーブルを持っています

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

すべてが1つのこと以外は機能するようです。新しい行を追加すると、ラベルSL_AがSL_Bに変更されます。追加されたすべての行には、アルファベットの次の文字が末尾に追加されます。これは動作していますが、テーブル1に行を追加してSL_Bにしてからテーブル2に行を追加すると、テーブル2の行にSL_Cが追加されます。文字の増分はそれぞれ独立している必要があります。したがって、表2の2行目にもSL_Bが必要です。

これは可能ですか？私はALPにデータを保持するための配列を作り、それに応じて変更されている

おかげ

Answer 1

を実証するJSFiddleを設定しています。ここでは、クリックされたボタンのインデックスを取得して、そのインデックスを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(); 
    }); 
}); 

注：削除するコードは、値をリセットしないため、管理する必要があります。