克隆錶行

Question

我有以下表

<table id="customFields" 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">SLA</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> 

然後我有以下的JavaScript來添加其他行

$(function() { 
    $(".addCF").click(function(){ 
     $("#customFields").append('<tr><td></td><td>SL_B</td> <td><input type="text" name="slOptions[User][NOC M1]" class="form-control" id="User1"></td> <td> &nbsp; <a href="javascript:void(0);" class="remCF">Remove</a></td></tr>'); 
    }); 
    $("#customFields").on('click','.remCF',function(){ 
     $(this).parent().parent().remove(); 
    }); 
}); 

這目前是我怎麼想它。但是，我遇到了一些問題。

首先，當你第一次看到它時，你會看到標籤SL_A。在克隆版本中，我手動將其設置爲SL_B。所有其他克隆都有SL_B。我想要做的是讓SL_跟着字母表中的下一個字母。所以第三行應該是SL_C。我不太確定我如何才能做到這一點。

我的第二個問題涉及克隆輸入的名稱。目前，它們都具有相同的名稱，例如slOptions[User][NOC M1] 當添加新行時，該名稱應該改變爲獨特的東西，可能使用上面的字母表的附加字母，例如， slOptions[User][NOC M1B]

是否有可能實現這些目標？

我已經設置了Fiddle示範

感謝

Answer 1

你可以存儲到可能出現的字母參考以及您當前的字母，然後在您的功能內確定合適的使用方法：

// Store the possible letters 
var possibleLetters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'; 
// Store the current letter 
var currentLetter = 'A'; 

$(function() { 
    $(".addCF").click(function(){ 
     // Resolve the next letter to add 
     var nextIndex = possibleLetters.indexOf(currentLetter) + 1; 
     // Update your reference 
     currentLetter = possibleLetters[nextIndex]; 
     // Append it 
     $("#customFields").append('<tr><td></td><td>SL_' + currentLetter + '</td> <td><input type="text" name="slOptions[User][NOC M1' + currentLetter + ']"...'); 
     // More code omitted for brevity 
    }); 
    // Still more code omitted for brevity 
}); 

您可以see an example of this in action here及以下證明：

Answer 2

這裏是你的兩個問題的解決方案： 參見：https://jsfiddle.net/pdxgrpqz/

$(function() { 
    alp = "A"; 
    $(".addCF").click(function(){ 
    alp = (alp.substring(0,alp.length-1)+String.fromCharCode(alp.charCodeAt(alp.length-1)+1)); 
    $("#customFields").append('<tr><td></td><td>SL_'+alp+'</td> <td><input type="text" name="slOptions[User][NOC M1'+alp+']" class="form-control" id="User1"></td> <td> &nbsp; <a href="javascript:void(0);" class="remCF">Remove</a></td></tr>'); 
    }); 
    $("#customFields").on('click','.remCF',function(){ 
     $(this).parent().parent().remove(); 
    }); 
});