Jquery kopieren und einfügen DOM-Knoten?

Question

Ich habe eine Tabelle, die wie folgt aussieht.

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

Am Ende der Tabelle habe ich Folgendes.

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

Um eine massive Seite von HTML vermeide ich dachte, es wäre cool, wenn Jquery das Formular erstellen kopieren könnte, zwicken einige Attribute dann nach dem Links Zeile erscheinen. Die einzige Frage ist wirklich wie ..

Also hier sind meine Fragen.

1) Wie greife ich das erstellen Formular und speichern Sie es als Variable mit jquery?

2) Wie bearbeite ich das versteckte Feld? Ich weiß, wie man Attribute ändert, aber wie wähle ich das Feld es, sobald das Formular innerhalb einer Variablen ist?

3) Wie füge ich dieses Formular in meine Tabelle nach dem Bearbeitungslink in einer eigenen Zeile ein? Ich brauche etwas wie Eltern-Elternteil-danach?

Dank Lasten

Answer 1

1) Legen Sie eine Kopie des Formulars in einer Variablen:

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

2) aus den Variablen den verborgenen Eingang Get:

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

3) Platz Form nach .edit Link in der gleichen Zeile (ich nehme an, dies ist in einem Event-Handler):

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

Answer 2

Dies erstellt eine Kopie der ausgewählten Elemente. Das Original wird nicht manipuliert, wenn Sie jetzt die form -Variable verwenden.

Bearbeiten von versteckten Feldern funktioniert genau wie die Manipulation andere DOM-Elemente:

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

Sie „Einfügen“ Ihre Form mehrere Methoden verwenden. Mögliche Lösungen wären:

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

Answer 3

Besuch http://api.jquery.com/clone/ für ausführliche Erklärung.

Dies ist die schnelle Vorschau

HTML

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

Javascript

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

Ausgabe

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

Hoffe, es hilft ..