Colorier une ligne d'un tableau

Version imprimable

Bonjour, j'essaye de faire une manipulation en java script sans succès.

Je veux sur un clique d'un bouton ou d'un selectbox qui appartient au <tr>, je peux colorier toute la ligne.

Ce que je suis arrivé a faire en m'inspirant d'autre exemple c'est de cliquer sur une ligne du tableau et elle devient en vert.
Et en double cliquant dessus elle devient blanche.
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 <html> <body> <script> function changeCouleur(ligne) { ligne.bgColor = '#006400'; } function remetCouleur(ligne) { ligne.bgColor = '#FFFFFF'; } </script> <table> <caption>Vainqueurs de la Coupe du monde de football</caption> <tr><th>ANNÉE</th> <th>FINALE</th> <th>SCORE</th> <th>LIEU</th><tr> <tr> </tr> <tr onClick="changeCouleur(this);" ondblclick="remetCouleur(this);"> <td>1978</td> <td>Argentine - Pays-Bas</td> <td>3 - 1</td><td>Buenos Aires, Argentine</td> </tr> <tr onClick="changeCouleur(this);" ondblclick="remetCouleur(this);"><td>1982</td> <td>Italie - Rép. fédérale d Allemagne</td> <td>3 - 1</td> <td>Madrid, Espagne</td></tr> <tr onClick="changeCouleur(this);" ondblclick="remetCouleur(this);"><td>1986</td> <td>Argentine - Rép. fédérale dAllemagne</td> <td>2 - 0</td> <td>Mexico, Mexique</td></tr> </table> </body> </html>
je ce que je veux faire c'est récupérer de préférence la valeur d'un selectbox
Code:

1 2 3 document.getElementById('liste').options[document.getElementById('liste').selectedIndex].value ou document.getElementById('liste').options[document.getElementById('liste').selectedIndex].text
Puis de transmettre la valeur récupérer en argument à une fonction qui me permettra de changer la couleur de la ligne selon la valeur de mon argument.

Est que qqun aurrait une idée sur la manière de traiter ce problème ?

18/08/2009, 11h15
SpaceFrog

Code:

ligne.style.backgroundColor

je met ce code dans ma fonction javascprit ?

Code:

1
2
3
4
5
6
7
8
9
10
11
<script>
		function changeCouleur(ligne)
		  {
		  ligne.style.backgroundColor = '#006400';
		  }
 
		function remetCouleur(ligne)
		  {
		  ligne.style.backgroundColor= '#FFFFFF';
		  }
</script>

SA ne change rien, j'ai pas compri ?

18/08/2009, 12h02
SpaceFrog

ha jke croyais que c'etait le bgcolor qui te posait problème ...
a priori non... utilise de prefernece le style ...

sinon pour ta question tu peux etre plus clair ???

je ne vois pas de select dans ton code ...

ok, je met le code :

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
<html>		
	<body>
	<script>
		function changeCouleur(ligne)
		  {
		  ligne.bgColor = '#006400';
		  }
 
		function remetCouleur(ligne)
		  {
		  ligne.bgColor = '#FFFFFF';
		  }
		</script>
 
		<table>
		<caption>Vainqueurs de la Coupe du monde de football</caption>
		<tr><!--<th>Action</th>--><th>ANNÉE</th> <th>FINALE</th> <th>SCORE</th> <th>LIEU</th><th>Action</th></tr>		
 
		<tr onClick="changeCouleur(this);" ondblclick="remetCouleur(this);">
			<!--<td></td>-->
			<td>1978</td>
			<td>Argentine - Pays-Bas</td>
			<td>3 - 1</td>
			<td>Buenos Aires, Argentine</td>
			<td>
				<select name=sel>
					<option>---Choisissez---</option>
					<option value=1>vert</option>
					<option value=2>bleu</option>
					<option value=3>oranage</option>
					<option value=4>rouge</option>
				</select>	
			</td>
		</tr>	
		<tr onClick="changeCouleur(this);" ondblclick="remetCouleur(this);">
			<td>1982</td> 
			<td>Italie - Rép. fédérale d Allemagne</td> 
			<td>3 - 1</td> 
			<td>Madrid, Espagne</td>
			<td>
				<select name=sel>
					<option>---Choisissez---</option>
					<option value=1>vert</option>
					<option value=2>bleu</option>
					<option value=3>oranage</option>
					<option value=4>rouge</option>
				</select>	
			</td>
		</tr>
		<tr onClick="changeCouleur(this);" ondblclick="remetCouleur(this);"><td>1986</td> <td>Argentine - Rép. fédérale dAllemagne</td> <td>2 - 0</td> <td>Mexico, Mexique</td></tr>
		</table>
		</body>
</html>

J'ai mis les select, mais je voudrai que lorsque je séléctionne la couleur bleu, toute la ligne du tableau se mette en bleu !!

Oulà tu es très mal parti pour y arriver ...
le fait d'utiliser un tableau pour ta mise en page est dramatique

en effet le select étant dans la ligne il prend aussi le onclick

pourquoi ne pas simplement gérer le changement de couleur à partir du select ?

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
<html>
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<script type='text/javascript'>
function changecouleur(ligne,couleur){
ligne.parentNode.parentNode.style.backgroundColor=ligne.value;
}
</script>
<title>Nouvelle page 2</title>
 
 
	<body>
 
 
		<table>
		<tr><!--<th>Action</th>--><th>ANNÉE</th> <th>FINALE</th> <th>SCORE</th> <th>LIEU</th><th>Action</th></tr>		
 
		<tr >
			<!--<td></td>-->
			<td>1978</td>
			<td>Argentine - Pays-Bas</td>
			<td>3 - 1</td>
			<td>Buenos Aires, Argentine</td>
			<td>
				<select name=sel onchange="changecouleur(this)">
					<option value="white">---Choisissez---</option>
					<option value="green">vert</option>
					<option value="blue">bleu</option>
					<option value="orange">oranage</option>
					<option value="red">rouge</option>
				</select>	
			</td>
		</tr>	
		<tr >
			<td>1982</td> 
			<td>Italie - Rép. fédérale d Allemagne</td> 
			<td>3 - 1</td> 
			<td>Madrid, Espagne</td>
			<td>
				<select name=sel onchange="changecouleur(this)">
					<option value="white">---Choisissez---</option>
					<option value="green">vert</option>
					<option value="blue">bleu</option>
					<option value="orange">oranage</option>
					<option value="red">rouge</option>
				</select>	
			</td>
		</tr>
		<tr ><td>1986</td> <td>Argentine - Rép. fédérale dAllemagne</td> <td>2 - 0</td> <td>Mexico, Mexique</td>
		<td>
		<select name=sel onchange="changecouleur(this)">
					<option value="white">---Choisissez---</option>
					<option value="green">vert</option>
					<option value="blue">bleu</option>
					<option value="orange">oranage</option>
					<option value="red">rouge</option>
				</select>	
		</td
		</tr>
		</table>
		</body>
</html>

18/08/2009, 17h23
bdptaki

La meilleur solution est toujours la plus simple....
Je n'ai vraiment pas l'habitude de développer en java script.

En tout cas merci beaucoup.