Question

In this fiddle you see a table with a select-field where you should select a name.
Below there are 5 input-fields where one could type in some text and 3 input-fields which are set to readonly.

I wanted to ask whether there is a way to add table cells dynamically when clicking on the button. The result should like this fiddle. The id should be incremented by i+.
I tried cloning the code, but could’t figure out how to do increment the id of the cloned input-field. The only input-fields I do not want to clone are the readonly input-fields.

Do you have an example code or a link you would recommend? A hint to start would be helpful as well.

I’ve been searching the net already, but wasn’t able to find something.

Answer 1

Here is the code you ask (i added an id to the button to target it easy)

  $('#add').click(function(){

    $(this)
        .closest('table')
        .find('tr td:first-child:not(:has([readonly]))')
        .each(function(){
            var $this = $(this);
            $this
                .clone()
                .each(function(){
                    var $inp = $(':input',this);
                    var id = $inp.attr('id');
                    var idwithoutnum = id.replace(/([0-9]+)$/,'');
                    var maxId = $(':input[id^='+idwithoutnum+']:last').attr('id');
                    var idnum = parseInt(/([0-9]+)$/.exec(maxId)) + 1;
                    var newid = id.replace(/([0-9]+)$/,idnum);
                    $inp.attr('id', newid);
                    alert(newid); // remove this line
                })
                .insertAfter($this
                             .closest('tr')
                             .find('td:last')
                            );
    });
});

example at http://jsfiddle.net/fMZDd/7/