jQuery changing the id attribute of all the children

Question

I need some help figuring out how to write some jQuery code.

I need to clone a table dynamically onclick. but then I need to change the ids of the table and its chil

Answer 1

If elem is the parent of your cloned structure and cntr is the counter you said you were maintaining, you can fix all ids in that cloned structure like this:

function fixIds(elem, cntr) {
    $(elem).find("[id]").add(elem).each(function() {
        this.id = this.id + cntr;
    })
}

If the ids might already have a cloned number at the end and you want to replace that number, you can do so like this:

function fixIds(elem, cntr) {
    $(elem).find("[id]").add(elem).each(function() {
        this.id = this.id.replace(/\d+$/, "") + cntr;
    })
}

So, based on the code you've now added to your question, you could do this:

Working example: http://jsfiddle.net/jfriend00/wFu9K/

Note: I also changed the DOM insertion code to insertAfter(), because you can't append one table to another the way you were doing (a table would either go after the existing table or inside a cell in the previous table).

---

If you are just trying to add a row, then you need to clone the row, not the whole table.

You could add a cloned row to the existing table with this code:

function fixIds(elem, cntr) {
    $(elem).find("[id]").add(elem).each(function() {
        this.id = this.id.replace(/\d+$/, "") + cntr;
    })
}
var cloneCntr = 1;
$("button").click(function () { 
    var row = $("#table tr").first().clone(true,true);
    fixIds(row, cloneCntr++);
    row.appendTo("#table") 
}); ​