Dupliquer (cloner) un élément avec jQuery
jQuery permet de faire une copie d'un élément HTML de la page, grâce à la fonction .clone(). Cela peut être très utile pour par exemple ajouter un élément à une liste, en se basant sur un élément existant tout en réinitialisant son contenu.
Voici un exemple, avec une page très simple qui contient une div destinée à contenir des informations sur une voiture :
<!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <meta charset="utf-8"> </head> <body> <button id="clone">Cloner</button> <div class="voiture" id="voiture1"> <div class="marque">renault</div> <div class="couleur">noir</div> </div> </body> </html>
Voici comment créer de nouvelles div voiture à partir de celle existante, lors du clic sur le bouton "Cloner" :
$(document).ready(function($){
$('#clone').click(function(e){
var copie = $('#voiture1').clone();
copie.find('.marque').html('peugeot');
copie.find('.couleur').html('rouge').css('color', 'red');
copie.appendTo('body');
});
});Après avoir lu excel condition couleur vous en saurez d'avantage sur ce sujet.
Le fonctionnement est très simple : la fonction clone crée une copie de l'élément HTML retourné par le sélecteur jQuery, et retourne une référence vers cet élément.
Donc il suffit de récupérer cette référence dans une variable : copie. Ensuite on peut modifier l'élément cloné en utilisant les différentes fonctions de jQuery que vous connaissez : .find(), .html(), .css()...
Et une fois qu'on a terminé, on ajoute l'élément au body (car par défait l'élément existe juste en mémoire, mais il n'est pas affiché dans la page, cf detach/attach).
Découvrez ce tutoriel photoshop : étiquette vintage à lire tout de suite !
moi j'ai utilisé cette fonction de cette façon mais j'arrive pas à récupérer ligne cloné (ajouter dans mon tableau):
<form action="choix_etab.php" method="post" >
<table>
<tr>
<td><input type="text" name="diplome" id="diplome" size="40" /></td>
<td><input type="text" name="specialite" id="specialite" size="40"/></td>
<td><input type="date" name="Date_dip" id="Date_dip" size="10"/></td>
<td><input type="button" onclick="clone(this.parentNode.parentNode) "/></td>
</tr>
</table>
</form>
et voici ma fonction clone():
function clone(line) {
newLine = line.cloneNode(true);
line.parentNode.appendChild(newLine);
}
avez vous une solution svp ??