Question

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:

• data[ProjectRequirement][0][description]
• data[ProjectRequirement][0][qty]
• …

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

• data[ProjectRequirement][1][description]
• data[ProjectRequirement][1][qty]
• …

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>

Answer 1

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/