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

我已经制作了一个数组，用于在alp中保存数据并进行相应更改。在这里我得到单击按钮的索引，以使用该索引作为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();
    });
});

注意：您必须管理要删除的代码，因为它没有重置值。

克隆具有独立值的行

1 个答案: