Jquery copier et coller noeud DOM?

Question

J'ai une table qui ressemble à ceci.

<tr> 
    <td>Link Name</td> 
    <td><a href="#" class="edit">Edit</a></td> 
</tr> 

Au bas du tableau, j'ai ce qui suit.

<tr> 
    <form class="hidden create"> 
    <h3>Add Link</h3> 
    ... 
    <input type="hidden" name="form_id" value="{menu-id}" /> 
    </form> 
</tr> 

Pour éviter une page massive de HTML, je pensais que ce serait cool si jquery pourrait copier le créer sous forme, modifier quelques attributs font alors apparaître après la ligne de liens. La seule requête est vraiment comment ..

Alors voici mes questions.

1) Comment saisir le formulaire de création et l'enregistrer en tant que variable avec jquery?

2) Comment modifier le champ caché? Je sais comment changer les attributs mais comment puis-je sélectionner le champ une fois que le formulaire est dans une variable?

3) Comment coller ce formulaire dans ma table après le lien d'édition sur sa propre ligne? J'ai besoin de quelque chose comme parent-parent-après?

charges Merci

Answer 1

1) placer une copie du formulaire dans une variable:

var create_form = $('form.create').clone(); 

2) Obtenir l'entrée cachée de la variable:

create_form.find(':hidden[name=form_id]').doSomething()... 

3) sous forme de localité après .edit lien dans la même ligne (je suppose que c'est dans un gestionnaire d'événements):

$(this).closest('tr').find('a.edit').after(create_form); 

Answer 2

Ceci crée une copie des éléments sélectionnés. L'original n'est pas manipulé si vous utilisez la variable form maintenant.

Modification des champs cachés fonctionne exactement comme la manipulation d'autres éléments DOM-:

form.attr('action', 'some-new-action'); 

Vous pouvez « coller » votre formulaire en utilisant plusieurs méthodes. Les solutions possibles seraient:

form.appendTo('#some-parent'); 
form.after('#some-parent'); 

Answer 3

visite http://api.jquery.com/clone/ pour une explication détaillée.

Ceci est l'aperçu rapide

HTML

<div class="container"> 
    <div class="hello">Hello</div> 
    <div class="goodbye">Goodbye</div> 
</div> 

Javascript

$('.hello').clone().appendTo('.goodbye'); 

de sortie

<div class="container"> 
    <div class="hello">Hello</div> 
    <div class="goodbye"> 
    Goodbye 
    <div class="hello">Hello</div> 
    </div> 
</div> 

Hope it helps ..