Discussion :

[AngePierre]

Bonjour à toutes et à tous,

J'aimerais bénéficier de votre expérience pour savoir si ce que j'envisage de faire est possible ou pas.
Il s'agit d'avoir une page dans laquelle l'utilisateur pourrait rentrer quelques informations à l'aide d'un formulaire. Une fois ces informations validées, elles viendraient alimenter un tableau situé sur la même page sans faire d'aller-retour vers le serveur.
Enfin, il serait possible de trier le tableau contenant les informations par le contenu des colonnes (dont une serait un horaire).

Voilà, je ne demande pas du tout un code tout prêt ou quoi que ce soit mais simplement savoir si :
- cela est techniquement possible
- vers quoi m'orienter

En sachant que je ne suis pas du tout un spécialiste du Javascript mais j'ai une formation en algorithmie qui devrait me permettre de m'en sortir

Je vous remercie par avance pour vos réponses !

P.S. Il ne s'agit pas du tout d'un projet commercial ou autre mais juste de dépanner ma femme pour son boulot "en off"

[SylvainPV]

J'imagine que la première question est rhétorique, vu que tu as déjà dû le voir des centaines de fois sur Internet.

C'est un problème relativement trivial, il n'y a pas d'outils ou de solutions clé en main vers quoi je pourrais t'orienter. Juste des connaissances de base sur HTML pour faire le formulaire et le tableau, et sur JavaScript pour récupérer les données du formulaire à la soumission et les injecter dans le tableau. Pour le tri des colonnes, il y a des centaines de bibliothèques pour ça sur le net.

[sekaijin]

comme ça ?
http://dev.sencha.com/ext/5.1.0/exam...?theme=neptune

A+JYT

[AngePierre]

@SylvainPV
La première question n'est pas rhétorique car tous les exemples sur lesquels je suis tombé incluent du PhP. Ce dont j'ai besoin, c'est une page simple, sans aller-retour sur un serveur (l'architecture utilisée au boulot chez ma femme date de la préhistoire).
C'est exactement ce que tu décris dans la foulée : soumission du formulaire = inclusion de l'élément dans le tableau déjà existant sur la page et remise à zéro du formulaire.
Je voulais m'assurer du fait que c'est effectivement possible sans PhP ou autre.

@sekaijin
C'est effectivement ce que je cherche ! C'est dommage que ce soit une usine à gaz payante
En tout cas c'est un super boulot de conception !

Merci pour ta réponse.

[AngePierre]

J'ai avancé dans ce que je veux faire.

A l'heure actuelle, j'ai mon formulaire qui me permet d'insérer les lignes dans le tableau et le tri se fait sans problème.

Je rencontre un petit souci pour ce qui concerne le changement de couleur de police en fonction de la sélection d'une valeur dans une liste déroulante.
Voici la portion de code javascript qui me permet d'insérer mes lignes dans le tableau

Code :

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

1
2
3
4
5
6
7
8
9
10
function ajouterLigne(){
	var tableau = document.getElementById("tableau");
	var ligne = tableau.insertRow(-1);//on a ajouté une ligne
	var colonne0 = ligne.insertCell(0);//on a une ajouté une cellule
	colonne0.innerHTML += "<select><option>ATT</option><option>CTL</option><option>EVL</option></select>";
	var colonne1 = ligne.insertCell(1);
	colonne1.innerHTML += document.getElementById("cabine").value;
	var colonne2 = ligne.insertCell(2);
	colonne2.innerHTML += document.getElementById("indicatif").value;
}

Je désire pouvoir, en fonction de ce qui sera sélectionné dans la première case (la liste déroulante) faire varier la couleur du texte de la ligne.

Si vous avez des idées, je suis preneur parce que la plupart des résultats que j'obtiens en recherchant ne sont pas applicables.

Cordialement,

[Golgotha]

C'est sauvegardé où ensuite les lignes créées ? (si j'ai bien compris c'est juste une page js)

[AngePierre]

Aucune sauvegarde, c'est destiné à être affiché, modifié, mais il n'y a aucune base de données derrière. Ce sont les contraintes d'un système qui date de deux décennies environ et qu'il est impossible de migrer.

[sekaijin]

...@sekaijin
C'est effectivement ce que je cherche ! C'est dommage que ce soit une usine à gaz payante
En tout cas c'est un super boulot de conception !

Merci pour ta réponse.

Ce n'est pas une usine à gaz et ce n'est pas payant dans tous les cas.
tout dépends de ce que tu veux faire.

Mais c'était pour répondre à la question de la faisabilité

A+JYT

[melka one]

jour

voici un exemple qui poura peut etre t'aidé

Code css :

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

1
2
3
4
5
6
7
8
9
10
table{
margin:10px;
border-collapse: collapse;
}
 
td{
border: 1px solid black;
padding:5px;
cursor:pointer;
}

Code :

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

1
2
3
4
5
6
7
8
9
10
11
var courant=false;
function choix(lui){
	if(courant){
	  courant.style.background='white'
	}
	courant=lui
	lui.style.background='#C1DDF1'
}
function changercouleur(lui){
courant.style.color=lui.value
}

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
<table>
   <tr onclick='choix(this)'>
       <td>valeur 1</td>
       <td>valeur 2</td>
       <td>valeur 3</td>
   </tr>
 <tr>
    <tr onclick='choix(this)'>
       <td>valeur 1</td>
       <td>valeur 2</td>
       <td>valeur 3</td>
   </tr>
  <tr onclick='choix(this)'>
       <td>valeur 1</td>
       <td>valeur 2</td>
       <td>valeur 3</td>
   </tr>
</table>     
<select  onchange="changercouleur(this)">
<option selected="selected" value="red">bla</option>
<option value="blue">blabla</option>
<option  value="green">blabli</option>
<option  value="purple">bloblo</option>
</select>

[SylvainPV]

Tu peux faire comme ça : http://jsbin.com/zijapeyofi/1/edit?html,js,output

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
var tableau = document.getElementById("tableau");
var colorByOption = { // à personnaliser selon tes besoins
    "ATT": "red",
    "CTL": "blue",
    "EVL": "green"
};
 
 
 
function ajouterLigne(){	
	var ligne = tableau.insertRow(-1);//on a ajouté une ligne
	var colonne0 = ligne.insertCell(0);//on a une ajouté une cellule
	colonne0.innerHTML += "<select><option>ATT</option><option>CTL</option><option>EVL</option></select>";
	var colonne1 = ligne.insertCell(1);
	colonne1.innerHTML += document.getElementById("cabine").value;
	var colonne2 = ligne.insertCell(2);
	colonne2.innerHTML += document.getElementById("indicatif").value;
     setColorsByOption(); // set the initial color of the new line
}
 
 
// petite fonction utilitaire à moi
function foreach(arraylike, iterator){
  return Array.prototype.forEach.call(arraylike, iterator);
}
 
function setColorsByOption(){
  foreach(tableau.rows, function(row){
    var valueChosen = row.querySelector("select").value;
    row.style.color = colorByOption[valueChosen];
  });
}
 
// réagit aux changements dans les listes déroulantes
tableau.addEventListener("change", setColorsByOption);

[AngePierre]

Merci pour cet exemple. J'ai essayé de l'appliquer mais cela ne fonctionne pas. J'ai un code d'erreur renvoyé qui est le suivant : "TypeError: null is not an object (evaluating 'row.querySelector("select").value')".
Mon premier réflexe a été de me dire que c'était parce que je n'avais pas mis de propriété value dans ma balise <option>. Sauf que dans ton exemple, ce n'est pas le cas non plus et de ton côté, ça fonctionne.

Je te copie colle la totalité de ce que j'ai pour le moment en espérant que ça t'aide parce que de mon côté, j'ai passé plus d'une heure dessus et je ne vois pas. Les autres fonctions font le job, j'ai renommé les variables pour être certain qu'il n'y ait pas de conflit. Je crois avoir atteint les limites de ce que je peux faire avec mes notions d'algorithmie

Voici le tableau tel que je le construis. J'ai mis en commentaire les données en dur dont je me servais pour faire les tests.

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
    <table id="tableau">
    	<thead>
    		<tr class=title>
    			<th>Etat</th>
    			<th>Cabine<span class="tri" onclick=TableOrder(event,1)>▼</span><span class="tri" onclick=TableOrder(event,0)>▲</span></th>
				<th>Indicatif</th>
				<th>ETD<span class="tri" onclick=TableOrder(event,1)>▼</span><span class="tri" onclick=TableOrder(event,0)>▲</span></th>
				<th>ADEP</th>
				<th>ADES</th>
				<th>Detail PLN</th>
				<th>IFF/SIF</th>
				<th>Nb A/C</th>
				<th>N°</th>
				<th>Modification</th>
			</tr>
    	</thead>
    	<tbody>
<!--				<tr><td>Liste déroulante</td><td>1</td><td>MARCOU41</td><td>0830</td><td>BC</td><td>T43</td><td>RBT</td><td>6551</td><td>2</td><td>02BC</td><td></td></tr>
				<tr><td>Liste déroulante</td><td>2</td><td>RAYAK81</td><td>0700</td><td>BM</td><td>SIMONE</td><td>RVT</td><td>6561</td><td>4</td><td>08BM</td><td></td></tr>
				<tr><td>Liste déroulante</td><td>1</td><td>RIVAGE23</td><td>1730</td><td>BC</td><td>BG</td><td>R49H1</td><td></td><td>3</td><td>06BC</td><td></td></tr>
				<tr><td>Liste déroulante</td><td>1</td><td>MARCOU41</td><td>0830</td><td>BC</td><td>T43</td><td>RBT</td><td>6551</td><td>2</td><td>02BC</td><td></td></tr>
				<tr><td>Liste déroulante</td><td>2</td><td>RAYAK81</td><td>0700</td><td>BM</td><td>SIMONE</td><td>RVT</td><td>6561</td><td>4</td><td>08BM</td><td></td></tr>
				<tr><td>Liste déroulante</td><td>1</td><td>RIVAGE23</td><td>1730</td><td>BC</td><td>BG</td><td>R49H1</td><td></td><td>3</td><td>06BC</td><td></td></tr>
-->    	</tbody>
 
    </table>
    <input type="button" value="Supprimer une ligne" onclick="supprimerLigne_indexN()" />

Et voici le javascript dont je me sers, en sachant que j'ai inclus ta partie à l'intérieur. J'ai également mis la deuxième partie, celle qui sert à faire le tri des colonnes. Cette deuxième partie est fonctionnelle, il n'y a pas de souci de conflit de nom de variable ou quoi que ce soit dans le style.

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
    <script>
		var tableau = document.getElementById("tableau");
		function ajouterLigne()
		{
			var tableau2 = document.getElementById("tableau");
			var ligne = tableau2.insertRow(-1);//on a ajouté une ligne
			var colonne0 = ligne.insertCell(0);//on a une ajouté une cellule
			colonne0.innerHTML += "<select><option>ATT</option><option>CTL</option><option>EVL</option></select>";
			var colonne1 = ligne.insertCell(1);
			colonne1.innerHTML += document.getElementById("cabine").value;
			var colonne2 = ligne.insertCell(2);
			colonne2.innerHTML += document.getElementById("indicatif").value;
			var colonne3 = ligne.insertCell(3);
			colonne3.innerHTML += document.getElementById("ETD").value;
			var colonne4 = ligne.insertCell(4);
			colonne4.innerHTML += document.getElementById("ADEP").value;
			var colonne5 = ligne.insertCell(5);
			colonne5.innerHTML += document.getElementById("ADES").value;
			var colonne6 = ligne.insertCell(6);
			colonne6.innerHTML += document.getElementById("Detail_PLN").value;
			var colonne7 = ligne.insertCell(7);
			colonne7.innerHTML += document.getElementById("IFF_SIF").value;
			var colonne8 = ligne.insertCell(8);
			colonne8.innerHTML += document.getElementById("Nb_AC").value;
			var colonne9 = ligne.insertCell(9);
			colonne9.innerHTML += document.getElementById("num").value;
			var colonne10 = ligne.insertCell(10);
			colonne10.innerHTML += "<input type=\"button\" onclick=\"myFunction();\" value=\"Modifier\"/>";
			document.getElementById("myForm").reset();
			setColorsByOption();
		}
		var colorByOption = {
		    "ATT": "green",
    		"CTL": "red",
    		"EVL": "yellow",
    		"STB": "white",
    		"FIN": "blue"
		};
		tableau.addEventListener("change", setColorsByOption);
 
		function setColorsByOption(){
		  foreach(tableau.rows, function(row){
			var valueChosen = row.querySelector("select").value;
			row.style.color = colorByOption[valueChosen];
		  });
 
		// petite fonction utilitaire à moi
		function foreach(arraylike, iterator){
		  return Array.prototype.forEach.call(arraylike, iterator);
		}
    }
		function supprimerLigne_indexN(){
			var n;
 
			// on récupère l'identifiant (id) de la table qui sera modifiée
			var tableau1 = document.getElementById("tableau");
			// nombre de lignes dans la table (avant suppression de la ligne n)
			var nbLignes = tableau.rows.length;
 
			n = prompt("Numéro de la ligne à supprimer ?\nEntrez une valeur entre 1 et " + (nbLignes-1));
 
			if (n < 1 || n > (nbLignes))
			{
				alert("Erreur, valeur incorrecte");
				return;
			}
 
			if (tableau1.rows.length)
			{
				tableau1.deleteRow(n); // suppression d'une ligne à l'index n
			}
		}
    </script>
    <script>
		var index
		function  sort_int(p1,p2) { return p1[index]-p2[index]; }			//fonction pour trier les nombres
		function sort_char(p1,p2) { return ((p1[index]>=p2[index])<<1)-1; }	//fonction pour trier les strings
 
		function TableOrder(e,Dec)  //Dec= 0:Croissant, 1:Décroissant
		{ //---- Détermine : oCell(cellule) oTable(table) index(index cellule) -----//
			var FntSort = new Array()
			if(!e) e=window.event
			for(oCell=e.srcElement?e.srcElement:e.target;oCell.tagName!="TH";oCell=oCell.parentNode);	//determine la cellule sélectionnée
			for(oTable=oCell.parentNode;oTable.tagName!="TABLE";oTable=oTable.parentNode);				//determine l'objet table parent
			for(index=0;oTable.rows[0].cells[index]!=oCell;index++);									//determine l'index de la cellule
 
 		//---- Copier Tableau Html dans Table JavaScript ----//
			var Table = new Array()
			for(r=1;r<oTable.rows.length;r++) Table[r-1] = new Array()
 
			for(c=0;c<oTable.rows[0].cells.length;c++)	//Sur toutes les cellules
			{	var Type;
				objet=oTable.rows[1].cells[c].innerHTML.replace(/<\/?[^>]+>/gi,"")
				if(objet.match(/^\d\d[\/-]\d\d[\/-]\d\d\d\d$/)) { FntSort[c]=sort_char; Type=0; } //date jj/mm/aaaa
				else if(objet.match(/^[0-9£?$\.\s-]+$/))		{ FntSort[c]=sort_int;  Type=1; } //nombre, numéraire
				else											{ FntSort[c]=sort_char; Type=2; } //Chaine de caractère
 
				for(r=1;r<oTable.rows.length;r++)		//De toutes les rangées
				{	objet=oTable.rows[r].cells[c].innerHTML.replace(/<\/?[^>]+>/gi,"")
					switch(Type)		
					{	case 0: Table[r-1][c]=new Date(objet.substring(6),objet.substring(3,5),objet.substring(0,2)); break; //date jj/mm/aaaa
						case 1: Table[r-1][c]=parseFloat(objet.replace(/[^0-9.-]/g,'')); break; //nombre
						case 2: Table[r-1][c]=objet.toLowerCase(); break; //Chaine de caractère
					}
					Table[r-1][c+oTable.rows[0].cells.length] = oTable.rows[r].cells[c].innerHTML
				}
			}
 
 		//--- Tri Table ---//
			Table.sort(FntSort[index]);
			if(Dec) Table.reverse();
 
		 //---- Copier Table JavaScript dans Tableau Html ----//
			for(c=0;c<oTable.rows[0].cells.length;c++)	//Sur toutes les cellules
				for(r=1;r<oTable.rows.length;r++)		//De toutes les rangées 
					oTable.rows[r].cells[c].innerHTML=Table[r-1][c+oTable.rows[0].cells.length];  
		}
	</script>

Si le problème est évident, je veux bien être guidé

Merci d'avance.

[SylvainPV]

il doit y avoir des lignes du tableau dans lequel il n'y a pas de select. Ecarte ces cas là:

Code :

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

1
2
3
4
5
6
 foreach(tableau.rows, function(row){
   var select = row.querySelector("select");
   if(select != null){
      row.style.color = colorByOption[select.value];
   }
});

[AngePierre]

Oui c'est exactement ça : c'est le <thead> qui pose problème !!! C'était évident pourtant !!!!!
Je n'y ai pas pensé parce que visuellement, il s'agissait de l'entête des colonnes mais les balises sont bien des <td> !!!!
Quand je pense que ça fait 30 minutes que je parcours le CSS de fond en comble pour être sûr que ça ne vient pas de là...
Un grand merci pour ton aide !

Je passe à la dernière étape : modification d'une ligne. Je pense faire ça avec un bouton "Modifier" sur chaque ligne.
Lorsqu'on clique dessus, les cases du formulaire qui servent à créer une ligne se remplissent avec la valeur des champs de la ligne en question, un bouton "Modifier la ligne" devient visible et le bouton "Ajouter une ligne" devient désactivé. L'utilisateur peut modifier les valeurs des cases, il clique sur "Modifier la ligne", les valeurs sont mises à jour, le bouton "Modifier la ligne" redevient invisible et le bouton "Ajouter une ligne" redevient actif (avec reset du formulaire).
J'avais pensé à autoriser le clique sur les TD pour modifier directement une valeur avec un popup par exemple mais je ne suis pas certain de la facilité de cette solution.

[Golgotha]

Si un jour vous voulez évoluer, voici une petite base avec jQuery.

https://jsfiddle.net/wqa3trf6/

[AngePierre]

Je viens de terminer ce que je voulais faire et le résultat est là même si le code va vous faire pleurer de rire.
J'ai un dernier problème à résoudre qui concerne la taille de la colonne "DETAIL PLN". En effet, cette colonne est alimentée par une <textarea> et lorsque cette <textarea> contient beaucoup de texte, la colonne reste fixe et la ligne devient très haute.
Ce que j'aimerais faire est soit de pouvoir adapter la taille de la colonne de manière dynamique, soit pouvoir la fixer au début pour qu'elle soit plus grande que les autres mais sans non plus bouffer tout l'espace.

Voici mon code final (je vous remercie encore pour votre aide) :

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
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
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Le titre du document</title>
    <style>
                {
                        border: 0;
                        margin: 0;
                        padding: 0;
                }
 
                table 
                {
                        text-align: left;
                        border-spacing: 0px;
                        border: 1px solid #aeb3b6;
                        border-collapse: collapse;
                        width: 80%;
                        table-layout: fixed;
                }
 
 
                table a, table, tbody, tfoot, tr, th, td 
                {
                   font-family: Arial, Helvetica, sans-serif;
                        line-height: 2.0em;
                        font-size: 13px;
                        color: #55595c;
                }
 
                tbody td{
                        line-height: 2.5em;
                }
 
                table caption
                {
                        padding: .4em 0 ;
                        font-size: 240%;
                        font-style: normal;
                        color: #FB7E00;
                }
 
                table a
                {
                        display: block;
                        text-decoration: none;
                        color: #FF8E53;
                        padding-right: 1.5em;
        
                }
 
                table a:hover, table a:focus
                {
                text-decoration: underline;
                }
 
                table th a
                {
                        color: #FF8E53;
                        text-align: right;
                }
                table .odd th a,table .odd td a,table .odd td{
                        color: #666;
                        padding-right: 1.0 em;
                }
 
                table th a:hover, table th a:focus, tbody tr:hover th
                {   
                   background-color: #FFCC99;
                        color: #fff !important;
                }
                table .odd th,table .odd td{
                        background-color: #DDDDDD;
                }
 
                thead th
                {
                        background-color: #8f8f8f;
                        text-transform: uppercase;
                        font-weight: normal;
                        letter-spacing: 1px;
                        color: #fff;
        
                }
 
                tfoot{
                        border-top: 1px solid #fff;
                }
 
                tfoot th,tfoot td{
                        color: #fff;
                }
 
                tbody th
                {
                   padding-right: 1.0em;
                        color: #25c1e2;
                        font-style: normal;
                        background-color: #fff;
                        border-bottom: 1px dotted #aeb3b6;
                }
 
                td
                {
                   color: #FF8E1C;
                        border-bottom: 1px dotted #aeb3b6;
                        padding-right: 0.5em;
                        max-width: 35%;
        
                }
 
                tbody tr.odd
                {
                        border-bottom: 1px dotted #aeb3b6;
                }
 
                tbody tr:hover td
                {
                  background-color: #FFCC99;
                }
 
                tbody tr:hover td,tbody tr:hover th, tbody tr:hover a
                {
                        color: #fff !important;
                }
                .tri { FONT:bold 12 Arial; CURSOR:pointer }
 
                fieldset {
                  margin-bottom: 15px;
                  padding: 10px;
                  width: 50%;
                }
 
                legend {
                  padding: 0px 3px;
                  font-weight: bold;
                  font-variant: small-caps;
                }
 
                label {
                  width: 110px;
                  display: inline-block;
                  vertical-align: top;
                  margin: 6px;
                }
        </style>
  </head>
  <body>
	<form method="post" action="" id="myForm">
		<fieldset>
			<legend>Informations relatives au PNL</legend>
			<label for="indicatif">Indicatif</label>
			<input type="text" name="indicatif" id="indicatif" />
			<label for="ETD">ETD</label>
			<input type="text" name="ETD" id="ETD" /><br />
			<label for="ADEP">ADEP</label>
			<input type="text" name="ADEP" id="ADEP" />
			<label for="ADES">ADES</label>
			<input type="text" name="ADES" id="ADES" /><br />
			<label for="Detail_PLN">Détail PNL</label>
			<textarea name="Detail_PLN" id="Detail_PLN" rows="5" cols="50"></textarea><br />
			<label for="IFF_SIF">IFF/SIF</label>
			<input type="text" name="IFF_SIF" id="IFF_SIF" />
			<label for="Nb_AC">Nb A/C</label>
			<input type="text" name="Nb_AC" id="Nb_AC" /><br />
			<label for="num">N°</label>
			<input type="text" name="num" id="num" /><br />
			<input type="button" onclick="ajouterLigne();" value="Ajouter la ligne" id="ajout"/> <input type="reset" />
			<input type="button" onclick="modifierSuite();" value="Modifier la ligne" id="modifier2"/>
		</fieldset>
	</form>
	<script>
                document.getElementById("modifier2").disabled=true;
        </script>
    <table id="tableau">
    	<thead>
    		<tr class=title>
				<th>Indicatif</th>
				<th>ETD<span class="tri" onclick=TableOrder(event,1)>▼</span><span class="tri" onclick=TableOrder(event,0)>▲</span></th>
				<th>ADEP</th>
				<th>ADES</th>
				<th>Detail PLN</th>
				<th>IFF/SIF</th>
				<th>Nb A/C</th>
				<th>N°</th>
				<th>Modification</th>
			</tr>
    	</thead>
    	<tbody>
<!--				<tr><td>MARCOU41</td><td>0830</td><td>BC</td><td>T43</td><td>RBT</td><td>6551</td><td>2</td><td>02BC</td><td><input type="button" onclick="modifier1(this);" value="Modifier"/></td></tr>
				<tr><td>RAYAK81</td><td>0700</td><td>BM</td><td>SIMONE</td><td>RVT</td><td>6561</td><td>4</td><td>08BM</td><td><input type="button" onclick="modifier1(this);" value="Modifier"/></td></tr>
				<tr><td>RIVAGE23</td><td>1730</td><td>BC</td><td>BG</td><td>R49H1</td><td></td><td>3</td><td>06BC</td><td><input type="button" onclick="modifier1(this);" value="Modifier"/></td></tr>
				<tr><td>MARCOU41</td><td>0830</td><td>BC</td><td>T43</td><td>RBT</td><td>6551</td><td>2</td><td>02BC</td><td><input type="button" onclick="modifier1(this);" value="Modifier"/></td></tr>
				<tr><td>RAYAK81</td><td>0700</td><td>BM</td><td>SIMONE</td><td>RVT</td><td>6561</td><td>4</td><td>08BM</td><td><input type="button" onclick="modifier1(this);" value="Modifier"/></td></tr>
				<tr><td>RIVAGE23</td><td>1730</td><td>BC</td><td>BG</td><td>R49H1</td><td></td><td>3</td><td>06BC</td><td><input type="button" onclick="modifier1(this);" value="Modifier"/></td></tr>
-->    	</tbody>
 
    </table>
    <input type="button" value="Supprimer une ligne" onclick="supprimerLigne_indexN()" />
	<script>
                function modifier1(obj) {
                        var oElem = obj.parentNode;
                        monElement = obj.parentNode;
                        numLigne = oElem.parentNode.rowIndex;
                        arrayLignes = document.getElementById("tableau").rows;
                        var indicatif = arrayLignes[oElem.parentNode.rowIndex].cells[0].innerHTML;
                        var etd = arrayLignes[oElem.parentNode.rowIndex].cells[1].innerHTML;
                        var adep = arrayLignes[oElem.parentNode.rowIndex].cells[2].innerHTML;
                        var ades = arrayLignes[oElem.parentNode.rowIndex].cells[3].innerHTML;
                        var detail_pln = arrayLignes[oElem.parentNode.rowIndex].cells[4].innerHTML;
                        var iff_sif = arrayLignes[oElem.parentNode.rowIndex].cells[5].innerHTML;
                        var nb_ac = arrayLignes[oElem.parentNode.rowIndex].cells[6].innerHTML;
                        var num = arrayLignes[oElem.parentNode.rowIndex].cells[7].innerHTML;
                        var element = document.getElementById("indicatif");
                        element.value = indicatif;
                        var element1 = document.getElementById("ETD");
                        element1.value = etd;
                        var element2 = document.getElementById("ADEP");
                        element2.value = adep;
                        var element3 = document.getElementById("ADES");
                        element3.value = ades;
                        var element4 = document.getElementById("Detail_PLN");
                        element4.value = detail_pln;
                        var element5 = document.getElementById("IFF_SIF");
                        element5.value = iff_sif;
                        var element6 = document.getElementById("Nb_AC");
                        element6.value = nb_ac;
                        var element7 = document.getElementById("num");
                        element7.value = num;
                        document.getElementById("ajout").disabled=true;
                        document.getElementById("modifier2").disabled=false;
                }
        </script>
	<script>        
                function modifierSuite() {
                        arrayLignes[monElement.parentNode.rowIndex].cells[0].innerHTML = document.getElementById("indicatif").value;
                        arrayLignes[monElement.parentNode.rowIndex].cells[1].innerHTML = document.getElementById("ETD").value;
                        arrayLignes[monElement.parentNode.rowIndex].cells[2].innerHTML = document.getElementById("ADEP").value;
                        arrayLignes[monElement.parentNode.rowIndex].cells[3].innerHTML = document.getElementById("ADES").value;
                        arrayLignes[monElement.parentNode.rowIndex].cells[4].innerHTML = document.getElementById("Detail_PLN").value;
                        arrayLignes[monElement.parentNode.rowIndex].cells[5].innerHTML = document.getElementById("IFF_SIF").value;
                        arrayLignes[monElement.parentNode.rowIndex].cells[6].innerHTML = document.getElementById("Nb_AC").value;
                        arrayLignes[monElement.parentNode.rowIndex].cells[7].innerHTML = document.getElementById("num").value;
                        document.getElementById("ajout").disabled=false;
                        document.getElementById("modifier2").disabled=true;
                        document.getElementById("myForm").reset();
                }
        </script>
	<script>
                function ajouterLigne()
                {
                        var tableau2 = document.getElementById("tableau");
                        var ligne = tableau2.insertRow(-1);//on a ajouté une ligne
                        var colonne1 = ligne.insertCell(0);
                        colonne1.innerHTML += document.getElementById("indicatif").value;
                        var colonne2 = ligne.insertCell(1);
                        colonne2.innerHTML += document.getElementById("ETD").value;
                        var colonne3 = ligne.insertCell(2);
                        colonne3.innerHTML += document.getElementById("ADEP").value;
                        var colonne4 = ligne.insertCell(3);
                        colonne4.innerHTML += document.getElementById("ADES").value;
                        var colonne5 = ligne.insertCell(4);
                        colonne5.innerHTML += document.getElementById("Detail_PLN").value;
                        var colonne6 = ligne.insertCell(5);
                        colonne6.innerHTML += document.getElementById("IFF_SIF").value;
                        var colonne7 = ligne.insertCell(6);
                        colonne7.innerHTML += document.getElementById("Nb_AC").value;
                        var colonne8 = ligne.insertCell(7);
                        colonne8.innerHTML += document.getElementById("num").value;
                        var colonne9 = ligne.insertCell(8);
                        colonne9.innerHTML += "<input type=\"button\" onclick=\"modifier1(this);\" value=\"Modifier\"/>";
                        document.getElementById("myForm").reset();
                };
//              }
                function supprimerLigne_indexN(){
                        var n;
 
                        // on récupère l'identifiant (id) de la table qui sera modifiée
                        var tableau1 = document.getElementById("tableau");
                        // nombre de lignes dans la table (avant suppression de la ligne n)
                        var nbLignes = tableau.rows.length;
 
                        n = prompt("Numéro de la ligne à supprimer ?\nEntrez une valeur entre 1 et " + (nbLignes-1));
 
                        if (n < 1 || n > (nbLignes))
                        {
                                alert("Erreur, valeur incorrecte");
                                return;
                        }
 
                        if (tableau1.rows.length)
                        {
                                tableau1.deleteRow(n); // suppression d'une ligne à l'index n
                        }
                }
    </script>
    <script>
                var index
                function  sort_int(p1,p2) { return p1[index]-p2[index]; }                       //fonction pour trier les nombres
                function sort_char(p1,p2) { return ((p1[index]>=p2[index])<<1)-1; }     //fonction pour trier les strings
 
                function TableOrder(e,Dec)  //Dec= 0:Croissant, 1:Décroissant
                { //---- Détermine : oCell(cellule) oTable(table) index(index cellule) -----//
                        var FntSort = new Array()
                        if(!e) e=window.event
                        for(oCell=e.srcElement?e.srcElement:e.target;oCell.tagName!="TH";oCell=oCell.parentNode);       //determine la cellule sélectionnée
                        for(oTable=oCell.parentNode;oTable.tagName!="TABLE";oTable=oTable.parentNode);                          //determine l'objet table parent
                        for(index=0;oTable.rows[0].cells[index]!=oCell;index++);                                                                        //determine l'index de la cellule
 
                //---- Copier Tableau Html dans Table JavaScript ----//
                        var Table = new Array()
                        for(r=1;r<oTable.rows.length;r++) Table[r-1] = new Array()
 
                        for(c=0;c<oTable.rows[0].cells.length;c++)      //Sur toutes les cellules
                        {       var Type;
                                objet=oTable.rows[1].cells[c].innerHTML.replace(/<\/?[^>]+>/gi,"")
                                if(objet.match(/^\d\d[\/-]\d\d[\/-]\d\d\d\d$/)) { FntSort[c]=sort_char; Type=0; } //date jj/mm/aaaa
                                else if(objet.match(/^[0-9£?$\.\s-]+$/))               { FntSort[c]=sort_int;  Type=1; } //nombre, numéraire
                                else                                                                                    { FntSort[c]=sort_char; Type=2; } //Chaine de caractère
 
                                for(r=1;r<oTable.rows.length;r++)               //De toutes les rangées
                                {       objet=oTable.rows[r].cells[c].innerHTML.replace(/<\/?[^>]+>/gi,"")
                                        switch(Type)            
                                        {       case 0: Table[r-1][c]=new Date(objet.substring(6),objet.substring(3,5),objet.substring(0,2)); break; //date jj/mm/aaaa
                                                case 1: Table[r-1][c]=parseFloat(objet.replace(/[^0-9.-]/g,'')); break; //nombre
                                                case 2: Table[r-1][c]=objet.toLowerCase(); break; //Chaine de caractère
                                        }
                                        Table[r-1][c+oTable.rows[0].cells.length] = oTable.rows[r].cells[c].innerHTML
                                }
                        }
 
                //--- Tri Table ---//
                        Table.sort(FntSort[index]);
                        if(Dec) Table.reverse();
 
                 //---- Copier Table JavaScript dans Tableau Html ----//
                        for(c=0;c<oTable.rows[0].cells.length;c++)      //Sur toutes les cellules
                                for(r=1;r<oTable.rows.length;r++)               //De toutes les rangées 
                                        oTable.rows[r].cells[c].innerHTML=Table[r-1][c+oTable.rows[0].cells.length];  
                }
        </script>
  </body>
</html>