¿Jquery copia y pega el nodo DOM?

Question

Tengo una tabla que se parece a la siguiente.

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

En la parte inferior de la tabla tengo lo siguiente.

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

Para evitar una página HTML masiva de pensé que estaría bien si jQuery podría copiar la forma de crear, modificar algunos atributos a continuación, hacer que aparece después de la fila de enlaces. La única consulta realmente es cómo ...

Así que aquí están mis preguntas.

1) ¿Cómo atrapo el formulario de creación y lo guardo como variable con jquery?

2) ¿Cómo edito el campo oculto? Sé cómo cambiar los atributos, pero ¿cómo selecciono el campo una vez que el formulario está dentro de una variable?

3) ¿Cómo pego este formulario en mi tabla después del enlace de edición en su propia fila? Necesito algo como padre-padre-después?

, gracias cargas

Answer 1

1) colocar una copia del formulario en una variable:

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

2) Obtener la entrada oculta de la variable:

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

3) Forma Lugar después de .edit enlace en la misma fila (supongo que esto es en un controlador de eventos):

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

Answer 2

Esto crea una copia de los elementos seleccionados. El original no se manipula si usa la variable form ahora.

Edición de campos ocultos funciona exactamente igual que la manipulación de otros DOM-elementos:

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

Usted puede "pegar" el formulario utilizando varios métodos. Las posibles soluciones serían:

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

Answer 3

visita http://api.jquery.com/clone/ para una explicación detallada.

Ésta es la vista previa rápida

HTML

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

Javascript

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

salida

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

creo que sirve ..