tableau et liste déroulante dynamique

Version imprimable

06/03/2012, 09h44
Ced39300

tableau et liste déroulante dynamique

Bonjour,

J'ai une page php qui comprend l'entête d'un tableau. Dans cette page, j'ai un bouton ajouter avec un événement onClick permettant de créer dynamiquement une ligne dans ce tableau. Dans cette ligne, j'ai 4 cellule dont une qui comprend une liste déroulante créée dynamiquement aussi avec la ligne. Pour chaque élément ajouté on lui affecte un id via une variable incrémentée à chaque ajout de ligne. Cette liste déroulante parcours l'ensemble des données d'une base de données et les autres cellules sont alimentées via le choix de cette liste déroulante. Le problème est que uniquement la dernière ligne est prise en compte pour les modifications. Je m'explique, admettons que je créé plusieurs lignes et que par une envie soudaine je dois modifier la première ligne via ma liste déroulante, les cellules ne sont pas modifiées. J'aimerais si possible avoir la solution pour parcourir l'ensemble des lignes de ce tableau et si on modifie la donnée de la liste déroulante (des lignes antérieurs) alors alimenter les cellules de cette ligne.

Merci par avance,
06/03/2012, 09h47
SpaceFrog

tu as juste un souci de pointer la bonne ligne pour la mise à jour ...
mais sans voir le code ...

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
<script language="javascript">
 
var nbr = 0;
var i = 0;
var j = 0;
var monOption;
var monSelect;
var td_entraineur;
var td_proprio
function AddOneRow()
{
		var newRow = document.getElementById('matable').insertRow(-1); //Insertion nouvelle ligne
 
			if(document.getElementById('matable').insertRow(-1))// On incrémente la variable nbr à chaque ajout de ligne
			{
			nbr = nbr + 1;
			}
 
		 var newCell = newRow.insertCell(0); // Insertion de la première cellule 
			 if (document.all){  // permet de différencier le navigateur
				var td = document.createElement("<td id='numero+"+nbr+"'>"); // Si ok on créé l'element et on lui affecte un id
				}
				else{ 
				var td = document.createElement("td"); // Sinon on créé l'élement 
				td.id="numero"+nbr; // et ensuite on lui affecte un id
				}
				td.innerHTML = nbr;
				td.size='5'; // Taile de l'élement
				newCell.appendChild(td);
/* ---------------------------------------------------------------------------------------------------------------------*/		
 
 
			  var newCell = newRow.insertCell(1); // idem que première cellule
				if (document.all){  
				monSelect = document.createElement("<select id='cheval"+nbr+"'>" );
				monSelect.onChange = selectionIndex();
				}
				else{ 
				monSelect = document.createElement("select");
				monOption; 
				monSelect.id='cheval'+nbr;
				monSelect.setAttribute("onChange", "selectionIndex()");
				}
				monSelect.style.width='150';
				for (i=0; i < cheval['nom'].length;i++) {
				monOption = document.createElement("option");
				monOption.text = cheval['nom'][i];
				monSelect.add(monOption);
				}
				newCell.appendChild(monSelect);
 
/* ---------------------------------------------------------------------------------------------------------------------*/		
		 	 var newCell = newRow.insertCell(2);  // idem que première cellule
				if (document.all){  
				td_entraineur = document.createElement("<td id='entraineur"+nbr+"'>");
				}
				else{ 
				td_entraineur = document.createElement("td");
				td_entraineur.id="entraineur"+nbr;
				}
				td_entraineur.size='20';
				newCell.appendChild(td_entraineur);	
/* ---------------------------------------------------------------------------------------------------------------------*/		
		 	 var newCell = newRow.insertCell(3); // idem que première cellule
				if (document.all){  
				td_proprio = document.createElement("<td id='proprietaire"+nbr+"'>");
				}
				else{ 
				td_proprio = document.createElement("td");
				td_proprio.id="proprietaire"+nbr;
				}
				td_proprio.size='20';
				newCell.appendChild(td_proprio);
}
 
function selectionIndex(){
				var num_entraineur;
				var num_proprio;
 
 
				for (i=0; i < monSelect.length;i++) {
				 if (monSelect.options[i].selected == true) {
				 num_entraineur = cheval['entraineur'][i];
				 num_proprio = cheval['proprietaire'][i];
				 }
				}
				for (j=0; j < entraineur['numero'].length;j++){
				if (num_entraineur == entraineur['numero'][j]){
				td_entraineur.innerHTML=entraineur['nom'][j] + ' ' + entraineur['prenom'][j];
				}
				}
				for (j=0; j < proprietaire['numero'].length;j++){
				if (num_proprio == proprietaire['numero'][j]){
				td_proprio.innerHTML=proprietaire['nom'][j] + ' ' + proprietaire['prenom'][j];
				}
				}
}
 
</script>

page PHP :

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
<?php
include "connexion.php";
 
$req="SELECT * FROM CHEVAL";
$resultat=mysql_query($req,$cnn);
$req_entraineur = "SELECT * FROM ENTRAINEUR";
$resultat_entraineur = mysql_query($req_entraineur,$cnn);
$req_proprietaire = "SELECT * FROM PROPRIETAIRE";
$resultat_proprietaire = mysql_query($req_proprietaire,$cnn);
 
?>
 
<script language="javascript">
var cheval = new Array();
cheval['nom'] = new Array();
cheval['proprietaire'] = new Array();
cheval['entraineur'] = new Array();
 
var entraineur = new Array();
entraineur['numero'] = new Array();
entraineur['nom'] = new Array();
entraineur['prenom'] = new Array();
 
var proprietaire = new Array();
proprietaire['numero'] = new Array();
proprietaire['nom'] = new Array();
proprietaire['prenom'] = new Array();
 
<?php
while($ligne = mysql_fetch_assoc($resultat))
{
echo 'cheval['."'nom'".'].push("' . $ligne['NOM_CHEVAL'].'");';
echo 'cheval['."'proprietaire'".'].push("'. $ligne['NUM_PROPRIO'].'");';
echo 'cheval['."'entraineur'".'].push("'. $ligne['NUM_ENTRAINEUR'].'");';
}
 
while($ligne = mysql_fetch_assoc($resultat_entraineur))
{
echo 'entraineur['."'numero'".'].push("' . $ligne['NUM_ENTRAINEUR'].'");';
echo 'entraineur['."'nom'".'].push("' . $ligne['NOM_ENTRAINEUR'].'");';
echo 'entraineur['."'prenom'".'].push("' . $ligne['PRENOM_ENTRAINEUR'].'");';
}
 
while($ligne = mysql_fetch_assoc($resultat_proprietaire))
{
echo 'proprietaire['."'numero'".'].push("' . $ligne['NUM_PROPRIO'].'");';
echo 'proprietaire['."'nom'".'].push("' . $ligne['NOM_PROPRIO'].'");';
echo 'proprietaire['."'prenom'".'].push("' . $ligne['PRENOM_PROPRIO'].'");';
}
 
?>
</script>

J'espère que je suis assez clair dans mon code. C'est un exercice pour mon examen de fin d'année. Donc si tu peux me trouver la solution :p

06/03/2012, 10h50
SpaceFrog

Citation:

C'est un exercice pour mon examen de fin d'année. Donc si tu peux me trouver la solution :p

Tu me donneras ton diplome ?
06/03/2012, 10h53
Ced39300

Tu dois déjà avoir ce qui faut de ton coté niveau diplôme, non ? :)

Code:

monSelect.onChange = selectionIndex();

ben tu devrais au moins passer une référence à l'objet cliqué ...

Code:

1
2
3
4
 
monSelect.onChange = selectionIndex(this);
//ou
monSelect.onChange = selectionIndex(this.id);

de sorte à faire la mise a jour sur le bon element

Code:

1
2
3
4
5
6
7
 
function selectionIndex(sel){
				var num_entraineur;
				var num_proprio;
                                var monSelect=sel
//ou 
                                 var monSelect=document.getElementById(sel)

Merci, il y a du progrès en effet mais c'est toujours les cellules de la dernière ligne qui sont mis à jour.

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
<script language="javascript">
 
var nbr = 0;
var i = 0;
var j = 0;
var monOption;
var monSelect;
var td_entraineur;
var td_proprio
function AddOneRow()
{
		var newRow = document.getElementById('matable').insertRow(-1); //Insertion nouvelle ligne
 
			if(document.getElementById('matable').insertRow(-1))// On incrémente la variable nbr à chaque ajout de ligne
			{
			nbr = nbr + 1;
			}
 
		 var newCell = newRow.insertCell(0); // Insertion de la première cellule 
			 if (document.all){  // permet de différencier le navigateur
				var td = document.createElement("<td id='numero+"+nbr+"'>"); // Si ok on créé l'element et on lui affecte un id
				}
				else{ 
				var td = document.createElement("td"); // Sinon on créé l'élement 
				td.id="numero"+nbr; // et ensuite on lui affecte un id
				}
				td.innerHTML = nbr;
				td.size='5'; // Taile de l'élement
				newCell.appendChild(td);
/* ---------------------------------------------------------------------------------------------------------------------*/		
 
 
			  var newCell = newRow.insertCell(1); // idem que première cellule
				if (document.all){  
				monSelect = document.createElement("<select id='cheval"+nbr+"'>" );
				monSelect.onChange = selectionIndex(this.id);
				}
				else{ 
				monSelect = document.createElement("select");
				monOption; 
				monSelect.id='cheval'+nbr;
				monSelect.setAttribute("onChange", "selectionIndex(this.id)");
				}
				monSelect.style.width='150';
				for (i=0; i < cheval['nom'].length;i++) {
				monOption = document.createElement("option");
				monOption.text = cheval['nom'][i];
				monSelect.add(monOption);
				}
				newCell.appendChild(monSelect);
/* ---------------------------------------------------------------------------------------------------------------------*/		
		 	 var newCell = newRow.insertCell(2);  // idem que première cellule
				if (document.all){  
				td_entraineur = document.createElement("<td id='entraineur"+nbr+"'>");
				}
				else{ 
				td_entraineur = document.createElement("td");
				td_entraineur.id="entraineur"+nbr;
				}
				td_entraineur.size='20';
				newCell.appendChild(td_entraineur);	
/* ---------------------------------------------------------------------------------------------------------------------*/		
		 	 var newCell = newRow.insertCell(3); // idem que première cellule
				if (document.all){  
				td_proprio = document.createElement("<td id='proprietaire"+nbr+"'>");
				}
				else{ 
				td_proprio = document.createElement("td");
				td_proprio.id="proprietaire"+nbr;
				}
				td_proprio.size='20';
				newCell.appendChild(td_proprio);			
}
 
function selectionIndex(sel){
				var num_entraineur;
				var num_proprio;
				var j;
				monSelect=document.getElementById(sel);
 
				for (i=0; i < monSelect.length;i++) {
				 if (monSelect.options[i].selected == true) {
				 num_entraineur = cheval['entraineur'][i];
				 num_proprio = cheval['proprietaire'][i];
				 }
				}
				for (j=0; j < entraineur['numero'].length;j++){
				if (num_entraineur == entraineur['numero'][j]){
				td_entraineur.innerHTML=entraineur['nom'][j] + ' ' + entraineur['prenom'][j];
				}
				}
				for (j=0; j < proprietaire['numero'].length;j++){
				if (num_proprio == proprietaire['numero'][j]){
				td_proprio.innerHTML=proprietaire['nom'][j] + ' ' + proprietaire['prenom'][j];
				}
				}
}
 
</script>

06/03/2012, 11h37
SpaceFrog

ben fait pareil avec ton td , ou pointe sur le tr à partir du select avec le parentNode()
06/03/2012, 16h28
Ced39300

Je n'y arrive pas :roll:
06/03/2012, 16h35
SpaceFrog

ben tu fais un insertRow
qui place si je ne m'abuse une nouvelle ligne en fin de tableau par defaut
mais accepte un integer en parmètre (nr de ligne ou insérer)

sinon regarde du cote de insertBefore ?
08/03/2012, 11h37
Ced39300

Bonjour,

J'ai cherché et étudié tes propositions concernent le parenNold() ou insertBefore() et je ne vois pas comment je peux procéder avec ces fontions.. Donc je reviens vers toi désespérément.. Si j'ai bien compris ces 2 fonctions, le parentNold() prendra le noeux parent et insertBefore celui d'avant. Ok, mais comment ensuite définir la ligne qui sera à modifier via ma liste déroulante. Je bug ..

J'ai placé un alert(td_proprietaire.id) dans ma fonction selectionIndex() et en effet si je change avec ma liste déroulante 1, c'est l'id de la dernière ligne qui apparaît dans la boite ... Comment je peux affecter les td_proprio.id et td_entraineur.id correspondant au bon select...

Peux tu m'éclaircir stp ..

C'est pas optimisé mais ça marche ...

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
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
<script language="javascript">
 
var nbr = 0;
var i = 0;
var j = 0;
var test;
var monOption;
var monSelect;
var td_entraineur;
var td_proprio;
 
 
function AddOneRow()
{
	newRow = document.getElementById('matable').insertRow(-1); //Insertion nouvelle ligne
 
 
 
		if(document.getElementById('matable').insertRow(-1))// On incrémente la variable nbr à chaque ajout de ligne
		{
			nbr = nbr + 1;
		}
 
 
		if (document.all)// permet de différencier le navigateur
		{  
			var td = document.createElement("<td id='numero+"+nbr+"'>"); // Si ok on créé l'element et on lui affecte un id
		}
		else
		{ 
			var td = document.createElement("td"); // Sinon on créé l'élement 
			td.id="numero"+nbr; // et ensuite on lui affecte un id
		}
 
	td.innerHTML = nbr;
	td.size='5'; // Taile de l'élement
	newRow.appendChild(td);
/* ---------------------------------------------------------------------------------------------------------------------*/		
 
 
		if (document.all)
		{  
			var td_cheval = document.createElement("<td id='cheval'>");
			monSelect = document.createElement("<select id='cheval"+nbr+"'>" );
			var monOption
		}
		else
		{ 
			var td_cheval = document.createElement("td");
			monSelect = document.createElement("select");
			monOption; 
			td_cheval.id='cheval';
			monSelect.id='cheval'+nbr;
			monSelect.setAttribute("onChange", "selectionIndex(this.id)");
		}
 
	monSelect.style.width='150';
 
		for (i=0; i < cheval['nom'].length;i++) 
		{
			monOption = document.createElement("option");
			monOption.text = cheval['nom'][i];
			monSelect.add(monOption);
		}
 
	newRow.appendChild(td_cheval);
	td_cheval.appendChild(monSelect);
 
 
/* ---------------------------------------------------------------------------------------------------------------------*/		
 
		if (document.all)
		{  
			td_entraineur = document.createElement("<td id='entraineur"+nbr+"'>");
		}
		else
		{ 
			td_entraineur = document.createElement("td");
			td_entraineur.id="entraineur"+nbr;
		}
 
	td_entraineur.size='20';
	newRow.appendChild(td_entraineur);	
	td_entraineur.innerHTML=nbr;
 
/* ---------------------------------------------------------------------------------------------------------------------*/		
 
		if (document.all)
		{  
			td_proprio = document.createElement("<td id='proprietaire"+nbr+"'>");
		}
		else
		{ 
			td_proprio = document.createElement("td");
			td_proprio.id="proprietaire"+nbr;
		}
 
	td_proprio.size='20';
	newRow.appendChild(td_proprio);	
	td_proprio.innerHTML=nbr;
 
 
/* ---------------------------------------------------------------------------------------------------------------------*/		
 
		if (document.all)
		{  
			var td = document.createElement("<td id='sexe"+nbr+"'>");
		}
		else
		{ 
			var td = document.createElement("td");
			td.id="sexe"+nbr;
		}
 
	td.size='5';
	newRow.appendChild(td);	
	td.innerHTML=nbr;
/* ---------------------------------------------------------------------------------------------------------------------*/		
		if (document.all)
		{  
			var td_cotej = document.createElement("<td id='td_cotej'>")
			var monInput = document.createElement("<input id='cotej"+nbr+"'>");
		}
		else
		{ 
			var td_cotej = document.createElement("td");
			var monInput = document.createElement("input");
			td_cotej.id="cotej";
			monInput.id="cotej"+nbr;
		}
 
	monInput.size='7';
	newRow.appendChild(td_cotej);
	td_cotej.appendChild(monInput);	
/* ---------------------------------------------------------------------------------------------------------------------*/		
 
		if (document.all)
		{ 
			var td_cotep = document.createElement("<td id='td_cotep'>")				
			var monInput = document.createElement("<input id='cotep"+nbr+"'>");
		}
		else
		{ 
			var td_cotep = document.createElement("td");
			var monInput = document.createElement("input");
			monInput.id="cotep"+nbr;
			td_cotep.id="cotep";
		}
 
	monInput.size='7';
	newRow.appendChild(td_cotep);
	td_cotep.appendChild(monInput);	
 
}
 
function selectionIndex(cel)
{
	var num_entraineur;
	var num_proprio;
	var j;
	var k;
	monSelect=document.getElementById(cel)
 
 
		for (i=0; i < monSelect.options.length;i++) 
		{
			if (monSelect.options[i].selected == true) 
			{
				num_entraineur = cheval['entraineur'][i];
				num_proprio=cheval['proprietaire'][i];
				var num = cel.slice(6,7);
			}
		}
 
		for (j=0; j < entraineur['numero'].length;j++)
		{
			if (num_entraineur == entraineur['numero'][j])
			{
				document.getElementById("entraineur"+num).innerHTML = entraineur['nom'][j] + ' ' + entraineur['prenom'][j];
			}
		}
 
		for (j=0; j < proprietaire['numero'].length;j++)
		{
			if (num_proprio == proprietaire['numero'][j])
			{
				document.getElementById('proprietaire'+num).innerHTML = proprietaire['nom'][j] + ' ' + proprietaire['prenom'][j];
			}
		}
 
}				
</script>