Bonjour,

modifier le clonage de la cellule 1 de mon tableau à l’extérieur de celui-ci
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xml:lang="fr" xmlns="http://www.w3.org/1999/xhtml">
 
	<head>
		<title>Ventilation</title>
 
		<script>
Code javascript : 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
			/*
			 * Variables globales
			 */
			var tableau = null;
			var cellule = null;
			var numLigne = 0;  // numLigne sera incrémenté à chaque nouvelle ligne
 
			function init()
			{
				tableau = document.getElementById("tableau");
 
				//1ère ligne du tableau
				var ligne = tableau.children[1].children[0];
 
				// 1ère cellule de la 1ère ligne : la la mémoriser dans cellule1, pour pouvoir la cloner ensuite
				//cellule1 = ligne.children[0];
 
				/*
				 * Une variante + intéressante consiste à donner un id = à la cellule, par exemple <td id="cellule1">, et alors
					cellule1 = document.getElementById("cellule1");
				 */
				 cellule1 = document.getElementById("cellule1");
			}
 
			function ajouterLigne()
			{
				var Cell;
				var typePiece = document.getElementById("type_de_piece").value;
 
				if (typePiece == "")
					return alert("Choisir le type de pièce");
				//var tableau = document.getElementById("tableau");
				var ligne = tableau.insertRow(-1);//on a ajouté une ligne
				numLigne++;
 
				Cell = ligne.insertCell(0);//on a ajouté une cellule
				Cell.innerHTML = ligne.rowIndex;//on y met le contenuCellule1 de numero
 
				var colonne2 = Cell = ligne.insertCell(1);//on ajoute la seconde cellule
				colonne2.innerHTML += document.getElementById("type_de_piece").value;
 
				var colonne3 = ligne.insertCell(2);
				/*
				 * Ligne suivante remplacée par la recopie de la cellule mémorisée dans la fonction init()
				 */
				//colonne3.innerHTML += document.getElementById("Entrée d'air").value;//on ajoute la seconde cellule
				remplirCellule(colonne3);
 
				var colonne4 = ligne.insertCell(3);
				colonne4.innerHTML += document.getElementById("Bouche d'extraction").value;//on ajoute la seconde cellule
 
				var colonne5 = ligne.insertCell(4);
				//Cell.innerHTML = ("<input type=button name=supprimer value=Supprimer onclick=suppression()>");  
				var bouton = document.createElement("input");
				bouton.type = "button";
				bouton.value = "Supprimer";
				bouton.onclick = function(){suppression(ligne)};
				colonne5.appendChild(bouton);
			}
 
			/*
			 * Remplir la cellule à l'identique de la cellule 1
			 */
			function remplirCellule(cellule)
			{
				/*
				 * le paramètre true est nécessaire, pour que les fils soient aussi clonés
				 */
				var element = cellule1.cloneNode(true);
				renommerIdEtName(element);
				cellule.appendChild(element);
				/*
				 * L'élément peut avoir des fils : renommer aussi leur id et leur name
				 */
				renommerFils(element);
 
			}
 
			/*
			 * 2 éléments ne doivent pas avoir le même id
			 */
			function renommerIdEtName(element)
			{
					if (undefined != element.id && element.id.length > 0)
					{
						element.id += ("_" + numLigne);
					}
					if (undefined != element.name && element.name.length > 0)
					{
						element.name += ("_" + numLigne);
					}
			}
 
			function renommerFils(elementParent)
			{
				if (elementParent.childElementCount > 0) {
					for (var i = 0; i < elementParent.childElementCount; i++)
					{
						element = elementParent.children[i];
						renommerIdEtName(element);
						/*
						 * Recommencer récursivement, si le fils a aussi des fils
						 */
						renommerFils(element);
					}
				}
			}
 
			function suppression(ligne)
			{
 
				//var nb = document.getElementById('tableau').rows.length;
				//document.getElementById('tableau').deleteRow(-1);
 
				document.getElementById('tableau').deleteRow(ligne.rowIndex);
 
				//Recomptage des lignes...
				//var tableau = document.getElementById('tableau');
				var trs = tableau.rows;
				var n = trs.length;
				var i;
 
				for (i=1; i<n; i++) //on commence à 1 et non à 0 ;)
				{
				trs[i].cells[0].innerHTML = trs[i].rowIndex;
				}
 
			}
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
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
 
		</script>
	</head>
 
	<body onload="init()">
 
		<form method="post" action="">
				<h2>Numéro de logement</h2>
		Numéro de logement :	<input type ="text" name="numero_de_logement" id="numero_de_logement" />
								<input type="button" id="bouton" onclick="ajouterLigne();" value="Nouveau_logement"/><br>
 
				<h2>Type de logement</h2>
 
						<label for="Type_de_logement">Type de logement : </label>
							<select id = "Type_de_logement" onchange="change(this.options[this.selectedIndex].value);">
								<option ></option>
								<option value="T1">T1</option>
								<option value="T2">T2</option>
								<option value="T3">T3</option>
								<option value="T4">T4</option>
								<option value="T5">T5</option>
								<option value="autre2">autre</option><br>	
							</select> 
								<input type="text" name="text_autre2" id="text_autre2"/><br>
 
				<h2>Marque de la ventilation</h2>
 
						<label for="Marque">Marque : </label>
							<select id = "Marque" onchange="change(this.options[this.selectedIndex].value);">
								<option ></option>
								<option value="Aldes">Aldes</option>
								<option value="Atlantic">Atlantic</option>
								<option value="Paul">Paul</option>
								<option value="Unelvent">Unelvent</option>
								<option value="autre3">autre</option>
							</select> 
							<input type="text" id="text_autre3"/>
 
						<label for="Nature">Nature : </label>
							<select id = Nature onchange="change(this.options[this.selectedIndex].value);">
								<option ></option>
								<option value="Fixe">Fixe</option>
								<option value="Autoréglable">Autoréglable</option>  
								<option value="Hygroréglable">Hygroréglable</option>
							</select><br>
 
			<h2>Type de pièce contrôlée</h2>
 
		Type de pièce : 		<select type="text" name="type_de_piece" id="type_de_piece" onchange="change(this.options[this.selectedIndex].value);">
										<option ></option>
										<option value="Séjour">Séjour</option>
										<option value="Cuisine">Cuisine</option>
										<option value="Salle de bain">Salle de bain</option>
										<option value="Cabinet d'aisance">Cabinet d'aisance</option>
										<option value="Cellier">Cellier</option>
										<option value="Local technique">Local technique</option>
										<option value="Chambre1">Chambre1</option>
										<option value="Chambre2">Chambre2</option>
										<option value="Chambre3">Chambre3</option>
										<option value="Chambre4">Chambre4</option>
 
								</select>
								<input type="button" onclick="ajouterLigne();" value="Nouvelle_ligne"/>
 
 
		</form>
 
 
 
		<table name= "tableau" id="tableau" border="1"><br>
			<caption>Ventilation simple</caption>
			<thead>
				<tr>
					<th id="numero">numéro </th>
					<th id="Type_de_piece">Type de pièce</th>
					<th id="Entrée d'air">Entrée d'air</th>
					<th id="Bouche d'extraction">Bouche d'extraction</th>
					<th id="Supprimer">Supprimer</th>
				</tr>
			</thead>
			<tbody>
					<td id="cellule1"> 
						<label for="Reference_de_l_entree_d_air">Référence de l'entrée d'air :</label><input type ="text" id ="Reference_Colonne2_ligne2"/><br>
						<label for="Nombre_d_entree_d_air">Nombre d'entrée d'air :</label> <input type ="number" id ="Colonne3-ligne2"/><br>
						<label for="Percement_des_mortaises :">Percement des mortaises : <br /> <input type="radio" name="Percement_des_mortaises" value="Oui"> Correct <br> <input type="radio" name="Percement_des_mortaises" value="Non"> Pas correct </form><br>
						<label for="Detalonnage_des_portes :">Détalonnage des portes  : <br /> <input type="radio" name="Detalonnage_des_portes" value="Oui"> hauteur correct <br> <input type="radio" name="Detalonnage_des_portes" value="Non"> hauteur pas correct </form><br>
					</td>
 
					<td>
						<label for="Nombre de d'entrée d'air">Référence de la bouche d'extraction d'air :</label><input type ="text" id ="bouche Colonne2-ligne2"/><br/> 
						<label for="Dépression en amont de la bouche (Pa)">Dépression en amont de la bouche (Pa) :</label><input type ="text" id ="Dépression-Colonne2-ligne2"/><br/>	
					</td>
 
					<td>
						<input type="button" value="Dupliquer" onclick="cloneEtVide(this.parentNode.parentNode) "/>
					</td>
 
					<td>
						<input type="button" value="supprimer_la_ligne" onclick="deleteRow(this.parentNode.parentNode) "/>
					</td>
			</tbody>
		</table>
 
	</body>
</html>

Peut-être y a t-il d'autres solutions? Quelle est la meilleure façon de procéder.
Merci.