Utilisation de clone

**fips1962** · 28/05/2016, 15h26

Bonjour,
J'ai un problème avec clone(), qui est une fonction simple et qui dans mon cas copie l'élément désigné dans une variable.
Lorsque je clone une div, lorsque j'affiche ma variable avec $variable.html(), j'ai ma div complète avec sa classe etc...
Exemple :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="table" class="hide">
<table>
	<tr class="entete">
		<th class="labelDesignation">Désignation</th>
		<th class="labelReference">Référence</th>
		<th class="labelQuantite">Quantité</th>
		<th class="labelCode">Code</th>
	</tr>
	<tr class="ligne">
		<td class="caseDesignation">{{ form_widget(prototype_articleProvisoire.designation) }}</td>
		<td class="caseReference">{{ form_widget(prototype_articleProvisoire.reference) }}</td>
		<td class="caseQuantite">{{ form_widget(prototype_articleProvisoire.quantite) }}</td>
		<td class="caseCode">{{ form_widget(prototype_articleProvisoire.code) }}</td>
	</tr>
</table>	
</div>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
$(document).ready(function(){
	var $ligne = $('.ligne').clone();
	console.log("$ligne : " + $ligne.html());
)};

Par contre lorsque je prend juste la balise <tr> avec sa classe comme dans le code ci-dessus, mon affichage ne me donne pas la balise <tr..., mais affiche à partir de <td...
Est-ce normal, sinon qu'est ce que je fais de faux ?
Merci pour votre aide et vos réponses.

**NoSmoking** · 28/05/2016, 17h19

Bonjour,

Lorsque je clone une div, lorsque j'affiche ma variable avec $variable.html(), j'ai ma div complète avec sa classe etc...

dans ce cas ce n'est pas un html() que tu mets en console.

La variable $ligne est bel et bien une <tr> il te suffit de l'append pour t'en rendre compte.

jQuery.clone()

**fips1962** · 28/05/2016, 17h42

Ah ben si, c'est bien un html() que je mets dans la console juste que devant je mets le nom de la variable.
Et comme effectivement le but est de faire un append, quand je le fais, j'obtiens pas une ligne mais juste les <td>...</td>, etc...

**Toufik83** · 28/05/2016, 19h00

si tu veux voir le nodeName (tr,td,div,span...) de ton élément parent cloné :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
$(document).ready(function(){
    var ligne = $('.ligne').clone();
      var Node=ligne.get(0).nodeName.toLowerCase();
  console.log("<"+Node+">"+ligne.html()+"</"+Node+">");
});

**fips1962** · 28/05/2016, 19h26

Ah oui, ça c'est quelque chose que je ne connaissais pas.
Mais je n'ai pas la réponse à ma question, car quand je fais un append de ma $ligne, je n'ai que les <td>... et pas les <tr>.
Est-ce qu'il faut faire un append avec la variable recomposée avec les nodes ? Avec les <div> il n'y a pas ces problèmes...

**danielhagnoul** · 28/05/2016, 20h36

Exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
  <meta http-equiv="cache-control" content="public, max-age=60">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="author" content="Daniel Hagnoul">
  <title>Test</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/le-frog/jquery-ui.min.css">
  <style>
 
    th, td {
      margin: 6px;
      padding: 3px;
      width: 200px;
      height: 80px;
      border: 1px dotted grey;
    }
 
  </style>
  <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
  <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/i18n/jquery-ui-i18n.min.js"></script>
  <script>
    'use strict';
 
    $( function(){
 
      $( '#copy' ).on( 'click', function( ev ){
        let tbody = $( '#myTable > tbody' );
 
        tbody.find( 'tr' ).eq( 0 ).clone( true, true ).appendTo( tbody );
      });
 
    });
  </script>
</head>
<body>
 
  <button id="copy">Copy</button>
 
  <table id="myTable">
    <thead>
      <tr>
        <th class="labelDesignation">Désignation</th>
        <th class="labelReference">Référence</th>
        <th class="labelQuantite">Quantité</th>
        <th class="labelCode">Code</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="caseDesignation">designation</td>
        <td class="caseReference">reference</td>
        <td class="caseQuantite">quantite</td>
        <td class="caseCode">code</td>
      </tr>
    </tbody>
  </table>
 
</body>
</html>

clone()

Attention aux ID !

Voir : plug-in dvjhClone. Réaliser un clone complet et le mettre en place.

Utilisation de clone

jQuery

Vue hybride

Discussions similaires

Partager

Partager