fila de la tabla clon

Question

¿Cómo puedo usar javascript (supongo) para clonar una fila de la tabla como ive bellamente ilustrada en la siguiente imagen?

clone row http://i28.tinypic.com/2yyuz61.png

Answer 1

Puede transmisión en circuito un evento en directo a todos los botones. Si les das una clase de clon por ejemplo, lo siguiente funcionará.

$('input.clone').live('click', function(){ 
    //put jquery this context into a var 
    var $btn = $(this); 
    //use .closest() to navigate from the buttno to the closest row and clone it 
    var $clonedRow = $btn.closest('tr').clone(); 
    //append the cloned row to end of the table 

    //clean ids if you need to 
    $clonedRow.find('*').andSelf().filter('[id]').each(function(){ 
     //clear id or change to something else 
     this.id += '_clone'; 
    }); 

    //finally append new row to end of table 
    $btn.closest('tbody').append($clonedRow); 
}); 

Nota: Si tiene elementos en la fila de la tabla con identificadores que tendrá que hacer un .Cada a través de ellos y los puso a un nuevo valor de lo contrario va a terminar con la duplicación de ID en el dom que no es válido y puede interferir con las selectores de jQuery

usted puede hacer esto al igual que

Answer 2

Si desea una solución muy simple, sólo tiene que utilizar innerHTML:

var html = document.getElementById("the row").innerHTML; 

var row = document.createElement('p'); 

row.innerHTML= html; 

document.getElementById("table id").appendChild(row); 

Answer 3

¿Con qué propósito desea utilizar los datos? He hecho cosas similares anteriormente en formularios de entrada de datos y, en general, he encontrado que es beneficioso para los usuarios no manipular todo en Javascript, sino enganchar para almacenar los datos en el servidor y la interfaz con AJAX.

El problema es que tan pronto como comienzas a dejar que los usuarios realicen este tipo de manipulación compleja de la tabla y accidentalmente presiona el botón Atrás, terminas con un montón de apostadores descontentos. Codificar el almacenamiento transitorio en una base de datos no es mucho más difícil que manipular Javascript y, de hecho, puede ser más fácil, ya que puede dividir las operaciones más fácilmente. La depuración es más simple por esa razón también (siempre debe inspeccionar el acceso al estado actual de su tabla).

Gran cantidad de opciones para manipular a través de AJAX, lo más simple es utilizar una división de marcador de posición y alimentar toda la estructura de la mesa según sea necesario.

Answer 4

ejemplo A jQuery:

$(document).ready(function(){ 
    $('TABLE.recs').delegate('INPUT.clone','click',function(e){ 
    e.preventDefault(); 
    var s = $(this).parent().parent().clone().wrap('<div>').parent().html(); 
    $('TABLE.recs TBODY TR:last').after(s); 
    }); 
});