Colorier une ligne d'un tableau

**bdptaki** · 18/08/2009, 11h11

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 :

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
<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 :

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

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 ?

**SpaceFrog** · 18/08/2009, 11h15

Code :

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

ligne.style.backgroundColor

**bdptaki** · 18/08/2009, 11h19

je met ce code dans ma fonction javascprit ?

Code :

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

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 ?

**SpaceFrog** · 18/08/2009, 12h02

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

**bdptaki** · 18/08/2009, 14h30

ok, je met le code :

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
<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 !!

**SpaceFrog** · 18/08/2009, 17h10

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 :

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

**bdptaki** · 18/08/2009, 17h23

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.

Colorier une ligne d'un tableau

JavaScript

Discussions similaires

Partager

Partager