Using Append to Copy Table Row - Would like to Create Unique Ids

Question

I have a form, containing a table with rows of items for users to fill in. I currently have it set up so that the user can add an additional row in case they need to add more information.

This works wonderfully, but I'm wondering if there's a way to generate a unique id for each cloned field.

My function is currently this:

 function addTableRow(table) {
         $(table).append($(table + ' tr:last').clone());
         return true;
   }

and is called from an onclick passing in the table id.

The table row contains the following information:

<tr>
     <td><input type="text" id="txtBarnParts1" name="txtBarnParts
 []"></td>
     <td><input type="text" id="txtBarnWidth1" name="txtBarnWidth
 []">ft</td>
     <td><input type="text" id="txtBarnRemarks1"
 name="txtBarnRemarks1[]"></td>
</tr>

What I would like is when I clone the row for the ids to be incremented by 1 so the next row would have ids:

txtBarnParts2, txtBarnWidth2, txtBarnRemarks2...and so on.

Is there a way to do this?

Thanks!

Answer 1

Try this. Requires jQuery 1.4 or later.

From your usage, I assume table stores an ID with the hash, as in "#myTable".

function addTableRow(table) {
   var $last = $(table + ' tr:last');
   var num = $last.index() + 1; // If the IDs in each row are indexed starting
                                //    with 1, then you would need "+ 2" instead
   $last.clone().find(':input[id]')
         .attr('id', function(i,current) { 
                         return current.replace(/\d+$/, num);
                    })
         .end().appendTo(table);
   return true;
}

This does a .find() on the new (cloned) row, searching for input elements that have an ID attribute. Then it passes a function to the .attr() method, which replaces the current ending digit with the new one.

• http://api.jquery.com/index/
• http://api.jquery.com/attr/
• http://api.jquery.com/end/
• http://api.jquery.com/appendTo/

---

EDIT: Missed a comma in the .attr() call. Fixed.

EDIT: Had .clone() in the wrong place. Fixed.

Answer 2

var $newTr = $(table + ' tr:last').clone();
var newIndex = $newTr.index() + 1;
$newTr.find('[id]').each(function () {
    this.id = this.id.replace(/[0-9]+$/e, newIndex);
});
$(table).append($newTr);

Answer 3

var i = 1
function addTableRow() {
         $("table").append($("table tr:last").clone());
         $("table tr:last input").attr("name", $("table tr:first input").attr("name")+i);
         i++;
   })

This working with names. Similar would work with id's.