Skip to content Skip to sidebar Skip to footer

Cloning A Table Row

I have the following table

Solution 1:

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 lettersvar possibleLetters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
// Store the current lettervar currentLetter = 'A';

$(function() {
    $(".addCF").click(function(){
        // Resolve the next letter to addvar 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 :

enter image description here

Solution 2:

Here is your solution for both the issues: See: 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();
    });
});

Post a Comment for "Cloning A Table Row"