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.
Partager