克隆表格行 [英] Cloning a table row

问题描述

我有下表

<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来添加其他行

I then have the following javascript to add additional rows

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

这目前可以我想要的方式工作.但是，我遇到了两件事.

This currently works how I want it to. However, there are a couple of things I am having issues with.

首先，当您第一次查看它时，您会看到标签SL_A.在克隆的版本中，我手动将其设置为SL_B.然后，所有其他克隆都具有SL_B.我想做的是让SL_后面跟着字母表中的下一个字母.因此，第三行应为SL_C.我不太确定如何实现这一目标.

Firstly, when you first view it, you will see the label SL_A. In the cloned version, I manually set it to SL_B. All other clones then have SL_B. What I am trying to do is have SL_ followed by the next letter in the alphabet. So the third row should be SL_C. I am not too sure how I can achieve this.

我的第二个问题与克隆输入的名称有关.目前，它们的名称都相同，例如slOptions[User][NOC M1] 添加新行时，名称应更改为唯一的名称，可能使用上方的字母附加字母，例如slOptions[User][NOC M1B]

My second issue relates to the name of the cloned input. At the moment, they all have the same name e.g. slOptions[User][NOC M1] When a new row is added, the name should change to something unique, maybe using the additional letter of the alphabet above e.g. slOptions[User][NOC M1B]

是否有可能实现这些目标?

Would it be possible to achieve these things?

我已经设置了小提琴进行演示

谢谢

推荐答案

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

You could store a reference to the possible letters as well as your current letter and then within your function determine the appropriate one to use :

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

您可以在此处查看此示例的操作，并在下面进行演示:

You can see an example of this in action here and demonstrated below :

这篇关于克隆表格行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！