couleur de fond <td>

**debutant_linux** · 15/12/2007, 10h42

Bonjour,

J'ai un tableau de 5 colonnes ,généré dynamiquement. La derniere colonne contient 3 liens ( detail , modifier, supprimer). La couleur de fond de cette derniere colonne est blanche , les 4 premiéres sont vertes.

J'aimerais que lors d'un survol d'un des liens , la couleur de fond des 4 premiere colonnes changent. Survol du lien supprimer => les 4 premiére colones (de la ligne) deviennent rouges

Avez vous des idées

D'avance merci

**kabkab** · 15/12/2007, 12h46

Bonjour,

Pour ton idée, il suffit de jouer sur le onmouseover et onmouseout.

Code :

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

<TD onmouseover="enrouge();" onmouseout="original();">

Pour ce qui est du contenu des fonctions enrouge et original, je te laisse nager un peu. Si tu ne trouves pas fais signe.

**jln13** · 15/12/2007, 13h42

Salut,

c'est un peu plus embetant a faire si tu veux changer la couleur que de certaines colonnes plutot que de toute la ligne. Tu peux faire un truc comme ca (en supposant que tu connais le nombre de colonnes a surligner) :

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
 
<html>
 
  <head>
 
    <title></title>
 
		<style>
			body {
				background:#aaa;
			}
			table {
				width:100%;
				text-align:center;
			}
			.rouge {
				background:red;
			}
			.blanc{
				background:#fff;
			}
			.vert {
				background:green;
			}
		</style>
 
 
 
		<script type="text/javascript">
		function change_color(num_ligne) 
		{
			var ligne=document.getElementById(num_ligne);
			var cols = ligne.getElementsByTagName("td");
			for (i=0;i<3;i++) {
				cols[i].className='rouge';
			}
		}
 
		function change_color2(num_ligne) 
		{
			var ligne=document.getElementById(num_ligne);
			var cols = ligne.getElementsByTagName("td");
			for (i=0;i<3;i++) {
				cols[i].className='vert';
			}
		}
		</script>
 
  </head>
 
  <body>
 
		<table summary="test" >
 
		  <tr id='tr1'>
 
		    <td class="vert">ligne1 - colonne1</td>
 
		    <td class="vert">ligne1 - colonne2</td>
 
		    <td class="vert">ligne1 - colonne3</td>
 
		    <td class="blanc" onmouseover="change_color('tr1');" onmouseout="change_color2('tr1');">supprimer</td>
 
		  </tr>
 
		  <tr id='tr2'>
 
		    <td class="vert">ligne2 - colonne1</td>
 
		    <td class="vert">ligne2 - colonne2</td>
 
		    <td class="vert">ligne2 - colonne3</td>
 
		    <td class="blanc" onmouseover="change_color('tr2');" onmouseout="change_color2('tr2');">supprimer</td>
 
		  </tr>
 
		  <tr id='tr3'>
 
		    <td class="vert">ligne3 - colonne1</td>
 
		    <td class="vert">ligne3 - colonne2</td>
 
		    <td class="vert">ligne3 - colonne3</td>
 
		    <td class="blanc" onmouseover="change_color('tr3');" onmouseout="change_color2('tr3');">supprimer</td>
 
		  </tr>
 
		</table>
 
  </body>
 
</html>

**debutant_linux** · 15/12/2007, 15h14

Merci à toi compatriote Normand

tu m'as beaucoup aidé

couleur de fond <td>

JavaScript

Discussions similaires

Partager

Partager