clone fila

Question

Come posso usare javascript (presumo) per clonare una riga della tabella come ive splendidamente illustrato nella foto qui sotto?

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

Answer 1

È possibile hookup un evento dal vivo per tutti i pulsanti. Ad esempio, se assegni loro una classe di cloni, funzionerà il seguente.

$('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: Se si dispone di elementi nella riga della tabella con id è necessario fare un .each attraverso di loro e metterli su un nuovo valore altrimenti si finirà con id duplicati di in dom che non è valido e in grado di svolgere il caos con selettori di jQuery

è possibile farlo in questo modo

Answer 2

Se si desidera una soluzione molto semplice, basta usare innerHTML:

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

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

row.innerHTML= html; 

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

Answer 3

Per quale scopo si desidera utilizzare i dati? Ho fatto cose simili in precedenza sui moduli di input dei dati e in generale ho trovato utile agli utenti non manipolare tutto in Javascript, ma agganciare per archiviare i dati sul server e interfacciare con AJAX.

Il problema è che non appena inizi a lasciare che gli utenti facciano questo tipo di manipolazione di tabelle complesse e accidentalmente colpiscano il pulsante back, ti ​​ritroverai con un sacco di giocatori scontenti. La codifica dello storage temporaneo su un database non è molto più difficile della manipolazione di Javascript e infatti può essere più semplice in quanto è possibile interrompere più facilmente le operazioni. Il debug è più semplice anche per questo motivo (si controlla sempre l'accesso allo stato corrente della tabella).

sacco di opzione per la movimentazione tramite AJAX - il più semplice è utilizzare solo una divisione segnaposto e alimentare l'intera struttura della tabella in base alle necessità.

Answer 4

A jQuery esempio:

$(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); 
    }); 
});