Increment input ID when inserting new Table Row

Question

I've got a form with a table with originally 1 row of input fields. Users can click the "New Row" button to get another row, with empty input fields. This is all working well but I need to also increment the ID numbers at the same time for the new Row.

I've setup a sample JSFiddle at:

http://jsfiddle.net/fmdataweb/vRe9v/2/

I've seen some examples here and on other sites about how to do this but I can't incorporate the code into my existing Javascript without breaking it. Here's the Javascript:

var table = $( '#nextYear' )[0];

$( table ).delegate( '#button2', 'click', function () {

var thisRow = $( this ).closest( 'tr' )[0];
$( thisRow ).clone().insertAfter( thisRow ).find( 'input:text' ).val( '' );
$(this).remove();
});

Really appreciate it if someone can show me how to extend my existing Javascript to increment the ID's at the same time as creating the new Row.

I'm going to be adding some additional scripts that use Typeahead and also enter enter an option into the select menu based on what was entered in the first activity field. I've taken these out whilst I get the incrementing of the ID's sorted out first. — user982124
– user982124, Commented Aug 15, 2012 at 12:30
I was just thinking that normally with repeated rows you can get by with classes and DOM traversal methods rather than ids. — nnnnnn
– nnnnnn, Commented Aug 15, 2012 at 12:42

techfoobar · Accepted Answer · 2012-08-15 12:35:48Z

1

Check this fiddle: http://jsfiddle.net/2Ds4J/1/

Added a little code to increment the IDs of all inputs and selects in the cloned row before inserting it into the DOM.

var newIDSuffix = 2;
$( table ).delegate( '#button2', 'click', function () {
    var thisRow = $( this ).closest( 'tr' )[0];

    var cloned = $( thisRow ).clone();
    cloned.find('input, select').each(function() {
         var id = $(this).attr('id');
         id = id.substring(0, id.length-1) + newIDSuffix;
         $(this).attr('id', id);
    });

    cloned.insertAfter( thisRow ).find( 'input:text' ).val( '' );

    newIDSuffix++;
});

answered Aug 15, 2012 at 12:35

techfoobar

66.8k14 gold badges117 silver badges138 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user982124 Over a year ago

Thanks techfoobar - that appears to work well. I noticed that the code to remove the "New Button" so it only appears once has been removed/broken. I've added it back in: $(this).remove(); but this only lets me click the button twice for a maximum of 3 rows. Any idea how to get this functionality back? Thanks for your help.

nnnnnn Over a year ago

The button stops working because it gets a new id that doesn't match the selector in .delegate("#button2"... You could change the selector to use a class, or .delegate('input[type="button"]', ...

user982124 Over a year ago

Thanks @nnnnnn - it's working great now. Learnt a lot tonight.

nnnnnn · Accepted Answer · 2012-08-15 12:41:35Z

1

var table = $( '#nextYear' )[0],
    nextId = 2;

$( table ).delegate( '#button2', 'click', function () {

    var thisRow = $( this ).closest( 'tr' )[0];
    $(thisRow).clone().insertAfter(thisRow).find('input:text').val('')
         .attr('id',function(i,oldVal){ return oldVal.replace(/\d+/,nextId); });
    $(this).remove();
    nextId++;
});

By way of explanation, if you call the .attr() method with a callback function the callback will be called once for each element in the jQuery object and the return value used to set the attribute in that element.

edited Aug 15, 2012 at 12:41

answered Aug 15, 2012 at 12:33

nnnnnn

150k30 gold badges210 silver badges247 bronze badges

2 Comments

user982124 Over a year ago

Thanks nnnnnn - that works well however I just noticed that it only increments the text inputs but not the select menu?

nnnnnn Over a year ago

Ah, that's because I just copied the selector from your code. Try .find(":input") instead of "input:text".

Collectives™ on Stack Overflow

Increment input ID when inserting new Table Row

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related