jQuery clonage d'un élément et modification des attributs des éléments enfants pour les garder uniques

Question

J'ai regardé quelques réponses à des questions similaires mais je ne comprends pas complètement les réponses.

J'ai une forme avec une table en ce qui contient des entrées, comme ci-dessous ...

<table class="form right 40 rewardclone_1"> 
<tr>   
<td><label for="financial_goal_1">Amount</label></td> 
<td>Pledge <span class="dollar">&#36;</span><input id="financial_goal_1" class="text dollars" type="text" name="financial_goal_1" /> or more</td> 
</tr> 
<tr> 
    <td><label for="maximum_1">Maximum</label></td> 
<td><input id="maximum_1" class="text dollars" type="text" name="maximum_1" /> available (blank for unlimited)</td> 
</tr> 
<tr> 
<td><label for="reward_1">Reward:</label></td> 
<td><textarea id="reward_1" name="reward_1"></textarea></td> 
</tr> 
</table> 

J'ai réussi à créer un bouton qui Clones ce tableau entier lorsque vous cliquez dessus.

$('#add_reward').click(function() {   
    $('.rewardclone').clone().appendTo('#rewards_container');  
}); 

Le problème est que je besoin de tous ces chiffres sur les attributs (reward_1, maximum_1, etc.) pour augmenter chaque fois que la table est cloné.

Toute aide serait grandement appréciée!

jQuery level: Débutant.

Merci.

Answer 1

Comme il est une petite table, je préfère l'utiliser comme un modèle au lieu de clonage et de trouver des éléments correspondants.

Note: selon la technologie du serveur, vous pouvez également charger rewardTableTmpl depuis le serveur pour la première fois, puis utiliser le modèle pour une utilisation ultérieure.

DEMO

$(function() { 
    var rewardTableTmpl = '<table class="form right 40 rewardclone">' + 
     '<tr><td><label for="financial_goal_{NUM}">Amount</label></td>' + 
     '<td>Pledge <span class="dollar">&#36;</span><input id="financial_goal_{NUM}" class="text dollars" type="text" name="financial_goal_{NUM}" /> or more</td>' + 
     '</tr><tr>' + 
     '<td><label for="maximum_{NUM}">Maximum</label></td>' + 
     '<td><input id="maximum_{NUM}" class="text dollars" type="text" name="maximum_{NUM}" /> available (blank for unlimited)</td>' + 
     '</tr><tr>' + 
     '<td><label for="reward_{NUM}">Reward:</label></td>' + 
     '<td><textarea id="reward_{NUM}" name="reward_{NUM}"></textarea></td>' + 
     '</tr></table>'; 

    $('#add_reward').click(function() { 
     $('#rewards_container').append(rewardTableTmpl.replace(/{NUM}/g, $('rewardclone').length + 1)); 
    }); 
}); 

Answer 2

Ce serait une solution simple pour votre cas:

$('#add_reward').click(function() {   
    var $x = $('.rewardclone').clone(); 
    $x.appendTo('#rewards_container'); 
    $x.find('input[id], textarea[id], label[for]').each(function() { 
     if($(this).is('label')) { 
      var new_id = parseInt($(this).attr('for').split('_').pop(), 10) + 1; 
      $(this).attr('for', new_id); 
     } else { 
      var new_id = parseInt(this.id.split('_').pop(), 10) + 1; 
      this.id = new_id; 
     } 
    });  
}); 

Answer 3

J'ai fait un petit ajustement à la réponse de Selvakumar Arumugam, parce que quand j'imprimer {NUM}, il ne change pas.

$(function() { 
    var rewardTableTmpl = '<table class="form right 40 rewardclone">' + 
     '<tr><td><label for="financial_goal_{NUM}">Amount</label></td>' + 
     '<td>Pledge <span class="dollar">&#36;</span><input id="financial_goal_{NUM}" class="text dollars" type="text" name="financial_goal_{NUM}" /> or more</td>' + 
     '</tr><tr>' + 
     '<td><label for="maximum_{NUM}">Maximum</label></td>' + 
     '<td><input id="maximum_{NUM}" class="text dollars" type="text" name="maximum_{NUM}" /> available (blank for unlimited)</td>' + 
     '</tr><tr>' + 
     '<td><label for="reward_{NUM}">Reward:</label></td>' + 
     '<td><textarea id="reward_{NUM}" name="reward_{NUM}"></textarea></td>' + 
     '</tr></table>'; 

var count =0; 
    $('#add_reward').click(function() { 
     count++; 
     $('#rewards_container').append(rewardTableTmpl.replace(/{NUM}/g, count)); 
    }); 

});