clone table row

Question

Comment puis-je utiliser javascript (je suppose) pour cloner une ligne de table comme ive magnifiquement illustré dans l'image ci-dessous?

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

Answer 1

Vous pouvez brancher des un événement en direct à tous les boutons. Si vous leur donnez une classe de clone, par exemple, cela fonctionnera.

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

S'il vous plaît Note: Si vous avez des éléments de la ligne de table avec ids vous aurez besoin de faire un .each à travers eux et les mettre à une nouvelle valeur, sinon vous finirez avec double id dans la dom qui n'est pas valide et peut causer des ravages avec des sélecteurs jQuery

vous pouvez le faire comme si

Answer 2

Si vous voulez une solution très simple, il suffit d'utiliser innerHTML:

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

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

row.innerHTML= html; 

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

Answer 3

Dans quel but voulez-vous utiliser les données? J'ai déjà fait des choses similaires sur des formulaires de saisie de données et généralement j'ai trouvé avantageux pour les utilisateurs de ne pas manipuler tout en Javascript mais de les stocker pour stocker les données sur le serveur et les interfaces avec AJAX.

Le problème est que dès que vous commencez à laisser les utilisateurs faire ce type de manipulation de table complexe et qu'ils frappent accidentellement le bouton de retour, vous vous retrouvez avec beaucoup de parieurs mécontents. Coder le stockage transitoire sur une base de données n'est pas si difficile que de manipuler Javascript et peut en fait être plus facile car vous pouvez décomposer les opérations plus facilement. Le débogage est aussi plus simple pour cette raison (vous avez toujours accès à l'état actuel de votre table).

Beaucoup d'options pour la gestion via AJAX - le plus simple étant d'utiliser simplement une division de support de place et d'alimenter toute la structure de la table en fonction des besoins.

Answer 4

exemple 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); 
    }); 
});