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

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.

T开发者_Python百科he 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!

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);

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.

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.

this is generic function

    var indexCloneTableLastRowSelect = 1;
    var indexCloneTableLastRowInput = 1;
    var forEachElementItrateOnce = 1;
function cloneTableLastRow_(tableID_) {


    tableID_ = '#' + tableID_;
    // copy|clone last row 
    $(tableID_).append($(tableID_ + " tr:last").clone());
    $(tableID_ + " tr:last").each(function (){

        $(tableID_ + " tr:last select").attr("name", function() {
            if (forEachElementItrateOnce == 1){
                indexCloneTableLastRowSelect++;
            }            
            this.name = this.name.replace(/[0-9]+$/, indexCloneTableLastRowSelect);
            this.id = this.id.replace(/[0-9]+$/, indexCloneTableLastRowSelect);
            forEachElementItrateOnce = 0;
        })
        $(tableID_ + " tr:last input").attr("name", function() {
            if (forEachElementItrateOnce == 1){
                indexCloneTableLastRowInput++;
            }
            this.name = this.name.replace(/[0-9]+$/, indexCloneTableLastRowInput);
            this.id = this.id.replace(/[0-9]+$/, indexCloneTableLastRowInput);
            forEachElementItrateOnce = 0;
        })

    })
    forEachElementItrateOnce = 1;
}