Insertion/Suppression d'une ligne d'une TABLE

Version imprimable

Bonjour,

modifier le clonage de la cellule 1 de mon tableau à l’extérieur de celui-ci

Code:

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:

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:

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.

Insertion/Suppression d'une ligne d'une TABLE

Bonjour,

Pour commencer, comme les éléments sont dans une FORM on peut raisonnablement penser que c'est pour les transmettre au serveur, il faut donc utiliser des NAME et non des ID.

Dans le cas de duplication de ligne, il est intéressant d'utiliser des NAME de la forme name="param[]", en effet si plusieurs éléments possèdent des NAME sous cette forme dans une FORM cela permet, coté serveur, de récupérer un tableau de données qui peut être traité grâce à l'utilisation d'une boucle.

Code:

1
2
3
4
5
6
7
8
  // lecture individuelle
  echo $_POST['param'][0]; // affiche la valeur du 1st champ
  echo $_POST['param'][1]; // affiche la valeur du 2nd champ
 
  // utilisation dans une boucle
  foreach( $_POST['param'] as $value ) {
    echo $value;
  }

Premier point donc la gestion des ID ne sert à rien.

Pour la création d'une nouvelle ligne il existe bien sûr la construction via les méthodes du DOM, toujours efficace mais pouvant devenir très verbeuse voir fastidieuse.

Une autre méthode, simple, consiste à créer la première ligne comme on la souhaite en final et au chargement de la page à réaliser un clone de cette ligne.

La partie initialisation ressemblerait à

Code:

1
2
3
4
5
6
7
8
9
10
11
12
// variables globales
var oTrClone,  // 1st ligne clonée
    oTbody;    // tBody pour ajout/suppression ligne   
 
function init(){
  // récup. TABLE concernée
  var oTable = document.getElementById("tableau");
  // récup. TBODY pour ajout/suppression
  oTbody = oTable.tBodies[0];
  // création d'un clone de la 1st ligne
  oTrClone = oTbody.rows[0].cloneNode(true);
}

Pour ajouter une ligne il suffit alors d'ajouter au TBODY de la TABLE un clone de ce clone mais pas le clone lui-même, sous peine de perdre cette référence "vierge".

Code:

1
2
3
4
function addLigne(){
  // Ajout d'un clone de la ligne clonée
  oTbody.appendChild( oTrClone.cloneNode(true));
}

Si l'on veut affecter un numéro de ligne chrono il suffit de parcourir les lignes du TBODY de la TABLE et d'affecter la valeur suivant l'indice dans la boucle.

Code:

1
2
3
4
5
6
7
8
function renumLigne(){
  var i,
      nbLig = oTbody.rows.length;
  // modification numéro de la ligne
  for( i=0; i < nbLig; i++){
   oTbody.rows[i].cells[0].innerHTML = i+1;
  }
}

Par la suite il suffit d'appeler cette fonction à chaque fois qu'une ligne est ajoutée, la fonction addLigne devient donc

Code:

1
2
3
4
5
6
function addLigne(){
  // Ajout d'un clone de la ligne clonée
  oTbody.appendChild( oTrClone.cloneNode(true));
  // renumérotation  
  renumLigne();
}

Reste la suppression d'une ligne et pour cela on va mettre un BUTTON type="button" sur la ligne, type="button" pour éviter la soumission car le BUTTON est dans une FORM, en lui mettant une action sur l'événement onclick et en passant en paramètre l'objet lui-même via le mot clé this.

Dans le cas de l'utilisation de la méthode cloneNode(true) les événements "ajoutés", via addEventListener par exemple, ne sont pas clonés. On pourrait bien sûr rajouter la gestion de l'événement dans la fonction addLigne pour séparer les différentes couches (CSS-HTML-JS) mais on reste ici sur du code simple.

exemple d'ajout:

Code:

1
2
3
<td>
  <button type="button" onclick="delLigne( this)">Supprimer</button>
</td>

Coté ergonomie on notera, entre autres, que dans le cas de la suppression de la première ligne cela revient à effacer le contenu mais pas à la supprimer physiquement de l'affichage, donc on la supprime puis on en ajoute une qui sera donc vierge. Dans les autres cas on supprime et on renumérote.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function delLigne( obj){
  // récup. ligne concernée
  var oTr = obj.parentNode.parentNode;    // BUTTON -> TD -> TR
  // suppression de la ligne
  oTbody.removeChild( oTr);
  // si il n'y a plus de ligne cela reviens à effacer
  if( !oTbody.rows.length){
    addLigne();
  }
  else{
    // renumérotation
    renumLigne();
  }
}

La totalité du script se résume donc à

Code:

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
// variables globales
var oTrClone,  // 1st ligne clonée
    oTbody;    // tBody pour ajout/suppression ligne 
function init(){
  // récup. TABLE concernée
  var oTable = document.getElementById("tableau");
  // récup. TBODY pour ajout/suppression
  oTbody = oTable.tBodies[0];
  // création d'un clone de la 1st ligne
  oTrClone = oTbody.rows[0].cloneNode(true);
}
function renumLigne(){
  var i,
      nbLig = oTbody.rows.length;
  // modification numéro de la ligne
  for( i=0; i < nbLig; i++){
   oTbody.rows[i].cells[0].innerHTML = i+1;
  }
}
function addLigne(){
  // Ajout d'un clone de la ligne clonée
  oTbody.appendChild( oTrClone.cloneNode(true));
  // renumérotation  
  renumLigne();
}
function delLigne( obj){
  // récup. ligne concernée
  var oTr = obj.parentNode.parentNode;    // BUTTON -> TD -> TR
  // suppression de la ligne
  oTbody.removeChild( oTr);
  // si il n'y a plus de ligne cela reviens à effacer
  if( !oTbody.rows.length){
    addLigne();
  }
  else{
    // renumérotation
    renumLigne();
  }
}

Certes l'ergonomie a quelque peu été modifiée mais le but est de montrer une autre façon de faire, même si il y en a d'autres, et ce avec un code somme toute compact même si perfectible.

Je tiens à préciser que nous avons travaillé sur une structure de type TABLE mais que le code est facilement adaptable à n'importe quelle autre structure.

L'exemple complet :

Code:

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
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Insertion/Suppression d'une ligne d'une TABLE</title>
<meta name="Author" content="NoSmoking">
<style>
html, body {
  margin: 0;
  padding: 0;
  font: 1em/ 1.5 Verdana, sans-serif;
}
#main {
  width: 60em;
  margin: 0 auto;
}
h1 {
  color: #069;
}
table {
  border-collapse:separate;
  border-spacing:1px;
  background:#888;
}
caption {
  padding: 1em;
  font-weight: bold;
  font-size: 1.25em;
}
th {
  background: #EEE;
  padding: .5em;
  text-shadow: 1px 1px 0px #FFF;
}
td {
  font-size: .8em;
  vertical-align: top;
  background: #FFF;
  padding: .5em 1em;
}
td input {
  margin-left: 1em;
}
td p {
  line-height: 1.5em;
  margin: 0 .5em 0.25em;
}
pre{
  background:#F2F6F8;
  font: 1em/ 1.5 "Courier New", monospace;
  text-shadow: 1px 1px 0px #FFF;  
  font-size: 1em;
  padding:0.25em;
}
.info{
  color:#888;
  font-size:.8em;
  margin:0.5em;
}
</style>
<script>
// variables globales
var oTrClone,  // 1st ligne clonée
    oTbody;    // tBody pour ajout/suppression ligne 
 
function init(){
  // récup. TABLE concernée
  var oTable = document.getElementById("tableau");
  // récup. TBODY pour ajout/suppression
  oTbody = oTable.tBodies[0];
  // création d'un clone de la 1st ligne
  oTrClone = oTbody.rows[0].cloneNode(true);
}
function renumLigne(){
  var i,
      nbLig = oTbody.rows.length;
  // modification numéro de la ligne
  for( i=0; i < nbLig; i++){
   oTbody.rows[i].cells[0].innerHTML = i+1;
  }
}
function addLigne(){
  // Ajout d'un clone de la ligne clonée
  oTbody.appendChild( oTrClone.cloneNode(true));
  // renumérotation  
  renumLigne();
}
function delLigne( obj){
  // récup. ligne concernée
  var oTr = obj.parentNode.parentNode;    // BUTTON -> TD -> TR
  // suppression de la ligne
  oTbody.removeChild( oTr);
  // si il n'y a plus de ligne cela reviens à effacer
  if( !oTbody.rows.length){
    addLigne();
  }
  else{
    // renumérotation
    renumLigne();
  }
}
</script>
</head>
<body onload="init()">
<div id="main">
  <form method="POST" action="#">
    <h2>Détails pièce contrôlée</h2>
    <button type="button" onclick="addLigne();">Ajouter une pièce</button>
    <table id="tableau">
      <caption>Ventilation simple</caption>
      <thead>
        <tr>
          <th>n°</th>
          <th>Type de pièce</th>
          <th>Entrée d'air</th>
          <th>Bouche d'extraction</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        <!-- ligne devant être clonée -->
        <tr>
          <td>1
          </td>
          <td>
            <select name="type_de_piece[]">
              <option value="">...</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>
          </td>
          <td>
            <p>Référence de l'entrée d'air</p>
            <p><input name="entree_air_reference[]" type="text"></p>
            <p>Nombre d'entrée d'air</p>
            <p><input name="entree_air_nombre[]" type="number"></p>
            <p>Percement des mortaises</p>
            <p><label><input name="percement_des_mortaises[]" value="Oui" type="radio"> Correct</label></p>
            <p><label><input name="percement_des_mortaises[]" value="Non" type="radio"> Incorrect</label></p>
            <p>Détalonnage des portes</p>
            <p><label><input name="detalonnage_des_portes[]" value="Oui" type="radio"> Hauteur correcte</label></p>
            <p><label><input name="detalonnage_des_portes[]" value="Non" type="radio"> Hauteur incorrecte</label></p>
          </td>
          <td>
            <p>Référence de la bouche d'extraction d'air</p>
            <p><input name="bouche_extraction_reference" type="text"></p>
            <p>Dépression en amont de la bouche (Pa)</p>
            <p><input name="bouche_extraction_depression" type="text"></p>
          </td>
          <td>
            <button type="button" onclick="delLigne( this)">Supprimer</button>
          </td>
        </tr>
        <!-- FIN ligne devant être clonée -->
      </tbody>
    </table>
  </form>
</div> 
</body>
</html>

31/08/2015, 11h50
stephane2601

Bonjour,

Merci pour ces réponses !

@NoSmoking
02/09/2015, 10h22
stephane2601

Bonjour @NoSmoking,

Je rencontre un problème sur les boutons à cocher qui ne sont pas indépendant entre chaque ligne.

Bien cordialement

Je continu à chercher la solution mais je prends toutes les bonne idées

Stéphane

Citation:

Je rencontre un problème sur les boutons à cocher qui ne sont pas indépendant entre chaque ligne.

c'est vrai que j'ai fait l'impasse là dessus mais toutes les billes sont présentes dans la réponse.

Pour les radio il faut avoir des NAME de la forme name = "param[x]" donc il faut se servir de la fonction renumLigne() pour remettre les NAME à jour.

Cela pourrait par exemple se faire de la façon suivante
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 function renameRadio( obj, num){ var oInput = obj.getElementsByTagName('INPUT'), data, i, nb = oInput.length; for( i = 0; i < nb; i += 1){ if( oInput[i].type === 'radio'){ // récup. libellé data = oInput[i].name.split('['); // on ne traite que ceux de la forme "nom[]" if( data[1] !== null){ // affectation du NAME // ajout indice entre crochet oInput[i].name = data[0] + '[' +num +']'; } } } }
on passe en paramètres la TR (obj) concernée et son numéro de ligne (num).

Il faut dans ce cas appeler la fonction dans la fonction renumLigne() qui devient donc
Code:

1 2 3 4 5 6 7 8 9 10 11 function renumLigne(){ var i, nbLig = oTbody.rows.length; // modification numéro de la ligne for( i = 0; i < nbLig; i+= 1){ // ajout info dans 1st colonne oTbody.rows[i].cells[0].innerHTML = i+1; // renomme les INPUT type="radio" renameRadio(oTbody.rows[i], i); } }
Là je crois que l'on a fait le tour !

[EDIT] correction erreur dans le code