CODEWITHSUNDEEP
javascriptjquerydom
SimonDowdles
SimonDowdles

Reputation: 2046

jQuery: Duplicate a table row and then alter the name of the inputs therein based on a specific naming convention?

I have a tricky situation where I need to duplicate a table row, and then alter the names of the inputs to a very specific format. The inputs are named as follows:

Now, when the above row is duplicated, the inputs need to be named as follows:

And so the pattern must continue. Duplicating the row is not a problem, and I have used the following method:

$j(\'table.WfTable tr\').live(\'mousedown\', function(e){
   if($j(e.target).hasClass(\'add\')){
      var clone = $j(e.target).parents(\'tr\').clone();
      $j(\'table.WfTable\').find(\'tbody\').append($j(clone));
      // NOW I WANT TO DO THE INPUT NAME CHANGE
   };
});

Ignore the escaped quotes, the JS is output via PHP. So at present, the row is duplicated and the names are the same. Is there a method whereby once duplicated, I can say:

"get the name of each input in the row, look for a field like [0] or [1] etc and change that value to the value of the rows index number in the table DOM element (ie row 1 is index 0, 2 is index 1...)?"

I can only assume that row 1 of table is at index 0 in the DOM tree of that table, and therefore think there must be a way to use that index data to apply to the input names?

Any help is much appreciated.

Simon

EDIT: Here is one table row, created dynamically (cakePHP view)

<tr class="repeat">
<td valign="top" style="width:250px;padding:10px 10px 10px 0;"><input type="hidden" name="data[ProjectRequirement][1][project_id]" value="1" id="ProjectRequirement1ProjectId"><input type="hidden" name="data[ProjectRequirement][1][id]" value="2" id="ProjectRequirement1Id"><div class="input text"><input name="data[ProjectRequirement][1][resource]" style="width:240px;" maxlength="40" type="text" value="Teachers" id="ProjectRequirement1Resource"></div></td>
<td valign="top" style="padding:10px 0;"><div class="input text"><input name="data[ProjectRequirement][1][description]" type="text" value="Any volunteer (part time) teachers" id="ProjectRequirement1Description"></div></td>
<td valign="top" style="width:150px;padding:10px 0;"><input name="data[ProjectRequirement][1][qty]" style="width:70px;float:left;clear:none;" maxlength="10" type="text" value="20+" id="ProjectRequirement1Qty"> <a href="#" class="add"><img src="/trusthau.net/img/buttons/btn_plus.png" style="float:right;clear:none;margin:10px 0 0 0;" class="add" alt=""></a></td>
</tr>

Upvotes: 1

Views: 1595

Answers (2)

Victor Kuznetsov
Victor Kuznetsov

Reputation: 284

Something like this:

$().ready(function(){
    $('#table tr.repeat:last').clone().appendTo('#table');
    $('#table tr.repeat:last td input').each(function(){
        var input = $(this),
            name = input.attr('name');
        name = name.replace(/(\d+)/, function(i) {
            return ++i;
        });
        input.attr('name', name);
    })
});​

http://jsfiddle.net/ZFNDD/4/

Upvotes: 4

Ninad Ajnikar
Ninad Ajnikar

Reputation: 173

Can you use last(jQuery('selector').last()) function in the jQuery code which would give you the last row every time.This would give you the appended row and then you can alter the input values by first collecting the number of rows present in the table.

I'm considering that there is going to be duplication of each and every row

Upvotes: 0

Related Questions