克隆表行

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

以下是您解决这两个问题的方法： 请参阅：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();
    });
});

Answer 2

您可以存储对可能的字母以及当前字母的引用，然后在您的函数中确定要使用的适当字母：

// 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并在下面演示：