éléments de clonage avec jquery

Question

Je travaille sur un formulaire que l'utilisateur peut ajouter des lignes comme il le souhaite. Il y a un lien nommé "ajouter une ligne", Quand il a cliqué, je veux cloner une table cachée et changer ses valeurs de nom, certains des noms de classe. Quelqu'un pourrait-il m'aider à ce sujet?

<table class="montaj montaj-satir"> 
    <tr> 
     <td width="62px"><input type="text" name="oper[--number--][kodu]" size="4" maxlength="4" /></td> 
     <td width="38px"> 
      <input type="checkbox" name="oper[--number--][onay]" value="1" /> 
      <input type="hidden" name="oper[--number--][terminal_hatasi]" value="0" /> 
      <input type="hidden" name="oper[--number--][soket_hatasi]" value="0" /> 
      <input type="hidden" name="oper[--number--][montaj_hatasi]" value="0" /> 
      <input type="hidden" name="oper[--number--][yon_hatasi]" value="0" /> 
      <input type="hidden" name="oper[--number--][push_hatasi]" value="0" /> 
      <input type="hidden" name="oper[--number--][olcu_hatasi]" value="0" /> 
      <input type="hidden" name="oper[--number--][bant_hatasi]" value="0" /> 
      <input type="hidden" name="oper[--number--][vida_hatasi]" value="0" /> 
      <input type="hidden" name="oper[--number--][komponent_hatasi]" value="0" /> 
     </td> 
     <td width="62px"><span class="terminal_hatasi--number--">0</span> <a href="#" class="add hata-ekle" id="terminal_hatasi--number--">&nbsp; &nbsp; &nbsp;</a></td> 
     <td width="62px"><span class="soket_hatasi--number--">0</span> <a href="#" class="add hata-ekle" id="soket_hatasi--number--">&nbsp; &nbsp; &nbsp;</a></td> 
     <td width="62px"><span class="montaj_hatasi--number--">0</span> <a href="#" class="add hata-ekle" id="montaj_hatasi--number--">&nbsp; &nbsp; &nbsp;</a></td> 
     <td width="62px"><span class="yon_hatasi--number--">0</span> <a href="#" class="add hata-ekle" id="yon_hatasi--number--">&nbsp; &nbsp; &nbsp;</a></td> 
     <td width="62px"><span class="push_hatasi--number--">0</span> <a href="#" class="add hata-ekle" id="push_hatasi--number--">&nbsp; &nbsp; &nbsp;</a></td> 
     <td width="62px"><span class="olcu_hatasi--number--">0</span> <a href="#" class="add hata-ekle" id="olcu_hatasi--number--">&nbsp; &nbsp; &nbsp;</a></td> 
     <td width="62px"><span class="bant_hatasi--number--">0</span> <a href="#" class="add hata-ekle" id="bant_hatasi--number--">&nbsp; &nbsp; &nbsp;</a></td> 
     <td width="62px"><span class="vida_hatasi--number--">0</span> <a href="#" class="add hata-ekle" id="vida_hatasi--number--">&nbsp; &nbsp; &nbsp;</a></td> 
     <td width="62px"><span class="komponent_hatasi--number--">0</span> <a href="#" class="add hata-ekle" id="komponent_hatasi--number--">&nbsp; &nbsp; &nbsp;</a></td> 
    </tr> 
    <tr> 
     <td colspan="2">Kablo Sıra No</td> 
     <td colspan="4"><input type="text" name="oper[--number--][kablo_sira_no]" value="" /></td> 
     <td colspan="2">Açıklama</td> 
     <td colspan="3"><input type="text" name="oper[--number--][aciklama]" value="" /></td> 
    </tr> 
</table> 

les liens qui ont .hata-ekle classe, ce qui augmente la valeur de l'entrée cachée et la durée à côté de lui.

Si nécessaire pour une nouvelle ligne, l'utilisateur doit cliquer sur le lien "ajouter une ligne" et le nouveau tableau cloné .montaj doit apparaître, mais --number-- doit être remplacé par un numéro unique.

Comment est-ce que je peux faire ceci?

Merci ...

Answer 1

OK,

Je ne comprends pas tout le processus, mais je peux vous donner quelques conseils:

1. Première méthode: vous écrivez une fonction prendre le nombre requis en paramètre et créer la table avec les utilitaires jQuery:

   function addTable(number) { 
       var table = $('<table>'); 
       var tr = $('<tr>').appendTo(table); 
       var td = $('<td>').appendTo(tr); 
       var span = $('<span>').appendTo(td).addClass('terminal_hatasi'+number) 
       ... 
   } 
   

2. Deuxième méthode: vous vous cloner table et vous recherchez votre entrée/span et ReTAG il:

   function addTable(number) { 
       var clone = $('table.montaj').first().clone(); 
   
       clone.find('input').each(function(item){ 
       var name = $(this).attr('name'); 
       $(this).attr('name',name.replace(/\d/,number)); 
       }); 
   
       ... 
   
       $(body).append(clone); 
   } 
   

Je pense qu'il est encore plus approche, ce sont les deux se sont d'abord à mon esprit. Ce ne sont pas nécessairement les meilleurs ...