cloneNode ne conserve pas les Script JS ?

**Douzout** · 19/10/2012, 19h37

Bonjour,

J'ai une petite fonctionnalité JS qui me permet d'ajouter des lignes à un tableau en utilisant la fonction cloneNode. Cette fonctionnalité gère également l'incrémentation d'id bien spécifiques des lignes du tableau.
Je me suis aperçu que si je mets du JS dans une balise <SCRIPT> dans une des lignes, et que je clone cette ligne, le contenu de la balise <SCRIPT> de ma nouvelle ligne est vide, càd les "functions" JS, n'ont pas suivi lors du clonage.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
function clone(ligne, idChamps, ligneNum) {
	if (ligne.parentNode.rows.length < 15) {
		alert(ligne.innerHTML); // --> le contenu de la balise SCRIPT est bien là
		var mesScripts = ligne.getElementsByTagName('SCRIPT');
		for (i=0 ; i<= mesScripts.length-1 ; i++) { 
			alert(mesScripts[i].innerHTML); // --> cela me donne bien le contenu de mon SCRIPT
		}		
		newLigne = ligne.cloneNode(true); // je clone
 
		alert(newLigne.innerHTML); // ---> le contenu de la balise SCRIPT est désormais vide...
		etc.

Est-ce un problème connu de la fonction cloneNode ?

Je souhaite non seulement appliquer le même <SCRIPT> à ma nouvelle ligne, mais également appliquer au contenu du script la même règle d'incrémentation des id.

Je mets ma petite page de test en entier. Le code n'est sans doute pas propre du tout, mais ça marche comme je le souhaite, à part pour les balises Script dans les lignes. D'ailleurs je sais qu'il faudra à terme factoriser mes fonctions javascript plutôt que la mettre à chaque ligne, mais les fonctions JS sont plus complexes que celles présentées, et je souhaite pour le moment les conserver dans chacune des lignes.

Merci beaucoup pour votre lecture, votre temps, et j'espère votre aide !

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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Tableau dynamique</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
 
table { border:thin solid #A2968A; border-collapse:collapse; text-align:center; }
td { border:thin dotted #A2968A; padding:5px; text-align:center; height: 50px; }
tr.trSpe { border:thin dotted #A2968A; padding:5px; text-align:center; height: 50px; background-color:#aeaeae; }
td.tdSpe { border:thin dotted #A2968A; padding:5px; text-align:center; height: 50px; background-color:#aeaeae; }
div.patience {position:fixed;top:25%;left:50%;font-size:16px;font-weight:bold;color:#000000;width:800px;margin-left:-400px;height:16px;
		border:2px solid #404040;text-align:center;padding-top:15px;padding-bottom:15px;padding-left:14px;padding-right:14px;background:#fffcd7;}
 
</style>
<script type="text/javascript" language="JavaScript">
function clone(ligne, idChamps, ligneNum) {
	if (ligne.parentNode.rows.length < 15) {
		alert(ligne.innerHTML); // --> le contenu de la balise SCRIPT est bien là
		var mesScripts = ligne.getElementsByTagName('SCRIPT');
		for (i=0 ; i<= mesScripts.length-1 ; i++) { 
			alert(mesScripts[i].innerHTML); // --> cela me donne bien le contenu de mon SCRIPT
		}		
		newLigne = ligne.cloneNode(true); // je clone
 
		alert(newLigne.innerHTML); // ---> le contenu de la balise SCRIPT est désormais vide...
 
		var reg = new RegExp (idChamps+'_'+ligneNum, 'g');
		var reg2 = new RegExp ('\''+idChamps+'\',\''+ligneNum+'\'', 'g');
		var nbLignesActuellement = ligne.parentNode.rows.length;
		var newLigneNum = nbLignesActuellement+1;
		var tds = newLigne.getElementsByTagName('td');
		for(i=0; i<tds.length; i++) {
			tds[i].innerHTML = tds[i].innerHTML.replace(reg, idChamps+'_'+newLigneNum); //on incrémente tous les ids _x_x_x
			tds[i].innerHTML = tds[i].innerHTML.replace(reg2, '\''+idChamps+'\',\''+newLigneNum+'\''); //on incrémente le ligneNum des boutons Copie et New
		}
		alert(newLigne.innerHTML);
		ligne.parentNode.appendChild(newLigne);
	}
	else alert("Pas plus de 15 lignes pour ce champs !");
 
}
function cloneEtVide(ligne, idChamps, ligneNum) {
	if (ligne.parentNode.rows.length < 15) {
		newLigne = ligne.cloneNode(true);
		//On vide d'abord les champs, ça fait des remplacements en moins...
		var mesInput = newLigne.getElementsByTagName('INPUT');
		var mesTextarea = newLigne.getElementsByTagName('textarea');
		var mesSelect = newLigne.getElementsByTagName('select');
		for (i=0 ; i<= mesInput.length-1 ; i++) { if (mesInput[i].type == 'text') mesInput[i].value=""; }
		for (i=0 ; i<= mesTextarea.length-1 ; i++) { mesTextarea[i].innerHTML = ""; }
		for (i=0 ; i<= mesSelect.length-1 ; i++) { mesSelect[i].selectedIndex = 0; }
		//On fait les remplacements
		var reg = new RegExp (idChamps+'_'+ligneNum, 'g');
		var reg2 = new RegExp ('\''+idChamps+'\',\''+ligneNum+'\'', 'g');
		var nbLignesActuellement = ligne.parentNode.rows.length;
		var newLigneNum = nbLignesActuellement+1;
		var tds = newLigne.getElementsByTagName('td');
		for(i=0; i<tds.length; i++) {
			tds[i].innerHTML = tds[i].innerHTML.replace(reg, idChamps+'_'+newLigneNum); //on incrémente tous les ids _x_x_x
			tds[i].innerHTML = tds[i].innerHTML.replace(reg2, '\''+idChamps+'\',\''+newLigneNum+'\''); //on incrémente le ligneNum des boutons Copie et New
		}
		//On envoie...
		ligne.parentNode.appendChild(newLigne);
	}
	else alert("Pas plus de 15 lignes dans ce tableau !");
}
function supprLigne(ligne, idChamps) {
	if (ligne.parentNode.rows.length >= 2) {
		document.getElementById('patientez').style.display='';
		var nbLignesActuellement = ligne.parentNode.rows.length;
		var ligneNum = ligne.rowIndex+1;
		ligne.parentNode.removeChild(ligne);
		var trs = document.getElementById('table1').getElementsByTagName('tr');
		for (i=ligneNum-1; i<trs.length; i++){
			var indice = trs[i].rowIndex+2; //le row index commence à 0 *et* il y a une ligne en moins...
			var newIndice = indice-1;
			var reg = new RegExp (idChamps+'_'+indice, 'g');
			//alert("il faut remplacer tous les "+idChamps+'_'+indice+" par "+idChamps+'_'+newIndice);
			var reg2 = new RegExp ('\''+idChamps+'\',\''+indice+'\'', 'g');
			//alert('et il faut remplacer tous les \''+idChamps+'\',\''+indice+'\''+' par \''+idChamps+'\',\''+newIndice+'\'');
			var tds = trs[i].getElementsByTagName('td');
			for(j=0; j<tds.length; j++) {
				tds[j].innerHTML = tds[j].innerHTML.replace(reg, idChamps+'_'+newIndice); //on décrémente tous les ids _x_x_x
				tds[j].innerHTML = tds[j].innerHTML.replace(reg2, '\''+idChamps+'\',\''+newIndice+'\''); //on décrémente le ligneNum des boutons Copie et New
			}
		}
		document.getElementById('patientez').style.display='none';
	}
	else alert("Impossible de supprimer la derniere ligne");
}
</script>
</head>
<body>
 
<div id="patientez" class="patience" style="display:none;">Veuillez patientez quelques instants</div>
 
<table id="table1" border="1" cellspacing="0" cellpadding="0">
<tr class="trSpe">
<td>
<SCRIPT type="text/javascript">function alertLigne_1_1_2_1(ligne){alert(ligne);}</SCRIPT>
	&nbsp;<input type="text" title="_1_1_2_1" value="'_1_1_2','1'" name="_1_1_2_1_3_1" size="16" maxlength="64"></td>
	<td>&nbsp;<input type="text" title="_1_1_2_1" value="_1_1_2_1_4_1" name="_1_1_2_1_4_1" size="16" maxlength="64"></td>
	<td>&nbsp;<TEXTAREA WRAP="soft" title="_1_1_2_1" name="_1_1_2_1_5_1" ROWS="2" COLS="16">textarea A2</TEXTAREA></td>
	<td>&nbsp;<select title="_1_1_2_1" name="_1_1_2_1_6_1"><OPTION value="">--<OPTION value="option 1">A3-1<OPTION value="option 2">A3-1<OPTION value="option 3">A3-1</select></td>
	<td>
		<input type="button" value="Copie" title="_1_1_2_1" onclick="clone(this.parentNode.parentNode, '_1_1_2','1');">
		<input type="button" value="New" title="_1_1_2_1" onclick="cloneEtVide(this.parentNode.parentNode, '_1_1_2','1');">
		<input type="button" value="Suppr." title="_1_1_2_1" onclick="supprLigne(this.parentNode.parentNode, '_1_1_2');">
		<input type="button" value="Alert" title="_1_1_2_1" onclick="alertLigne_1_1_2_1('_1_1_2_1');">
	</td>
</tr>
<tr>
<td class="tdSpe" NOWRAP>
<SCRIPT type="text/javascript">function alertLigne_1_1_2_2(ligne){alert(ligne);}</SCRIPT>
	&nbsp;<input type="text" title="_1_1_2_2" value="'_1_1_2','2'" name="_1_1_2_2_3_1" size="16" maxlength="64"></td>
	<td>&nbsp;<input type="text" value="_1_1_2_2_4_1" title="_1_1_2_2" name="_1_1_2_2_4_1" size="16" maxlength="64"></td>
	<td class="tdSpe" NOWRAP>&nbsp;<TEXTAREA WRAP="soft" title="_1_1_2_2" name="_1_1_2_2_5_1" ROWS="2" COLS="16">textarea B2</TEXTAREA></td>
	<td class="tdSpe" NOWRAP>&nbsp;<select title="_1_1_2_2" name="_1_1_2_2_6_1"><OPTION value="">--<OPTION value="option 1">B3-1<OPTION value="option 2">B3-1<OPTION value="option 3">B3-1</select></td>
	<td>
		<input type="button" value="Copie" title="_1_1_2_2" onclick="clone(this.parentNode.parentNode, '_1_1_2','2');">
		<input type="button" value="New" title="_1_1_2_2" onclick="cloneEtVide(this.parentNode.parentNode, '_1_1_2','2');">
		<input type="button" value="Suppr." title="_1_1_2_2" onclick="supprLigne(this.parentNode.parentNode, '_1_1_2');">
		<input type="button" value="Alert" title="_1_1_2_2" onclick="alertLigne_1_1_2_2('_1_1_2_2');">
	</td>
</tr>
<tr>
<td>
<SCRIPT type="text/javascript">function alertLigne_1_1_2_3(ligne){alert(ligne);}</SCRIPT>
	&nbsp;<input type="text" title="_1_1_2_3" value="'_1_1_2','3'" name="_1_1_2_3_3_1" size="16" maxlength="64"></td>
	<td>&nbsp;<input type="text" title="_1_1_2_3" value="_1_1_2_3_4_1" name="_1_1_2_3_4_1" size="16" maxlength="64"></td>
	<td>&nbsp;<TEXTAREA WRAP="soft" title="_1_1_2_3" name="_1_1_2_3_5_1" ROWS="2" COLS="16">textarea C2</TEXTAREA></td>
	<td>&nbsp;<select title="_1_1_2_3" name="_1_1_2_3_6_1"><OPTION value="">--<OPTION value="option 1">C3-1<OPTION value="option 2">C3-1<OPTION value="option 3">C3-1</select></td>
	<td>
		<input type="button" value="Copie" title="_1_1_2_3" onclick="clone(this.parentNode.parentNode, '_1_1_2','3');">
		<input type="button" value="New" title="_1_1_2_3" onclick="cloneEtVide(this.parentNode.parentNode, '_1_1_2','3');">
		<input type="button" value="Suppr." title="_1_1_2_3" onclick="supprLigne(this.parentNode.parentNode, '_1_1_2');">
		<input type="button" value="Alert" title="_1_1_2_3" onclick="alertLigne_1_1_2_3('_1_1_2_3');">
	</td>
</tr>
</table>
 
</table>
</body>
</html>

**sekaijin** · 20/10/2012, 18h23

Attention
les balise Script dans le code ne donnent pas lieu à la création d'in neud dans le DOM comme fils du Neud représentant la balise père.

TOUTE BALISE <script> dans le source HTML ajoute une entrée dans le DOM dans la liste des scripts soit donc dans le document

document.scripts chaque élément crée est un HTMLScriptElement
A+JYT

cloneNode ne conserve pas les Script JS ?

JavaScript

Discussions similaires

Partager

Partager