Is it possible to add table cells dynamically and give them a different id?

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.

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/

I would choose not to use tables for dom manipulation. Either way, here is how you could do it.

to add a table cell

var td = document.createElement("td")
var idVals = prevId.match(/^([a-z_]*)([0-9]+)$/)
td.innerHTML = "<input type='text' id='"+ idVals[1] + (parseInt(idVals[2]) + 1) +">";
tr.appendChild(td)

Hope this helps.