changer couleur ligne tableau

**xouzi** · 18/08/2011, 10h28

Bonjour,

J'aimerai que quand je passe ma souris sur une ligne de mon tableau la couleur change. J'utilise un code simple en JS mais sa ne fonctionne pas.

Code pour changer de couleur

Code :

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

1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript">
function changeCouleur(ligne)
  {
  ligne.bgColor = '#C0C0C0';
  }
 
function remetCouleur(ligne)
  {
  ligne.bgColor = '#FFFFFF';
  }
</script>

Code tableau ASP :

Code :

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

1
2
response.write"<table  cellspacing='0' cellspacing='0' id='tb' class='tb'>"
response.write"<tr id='aff_"&i&"' onMouseOver=""changeCouleur(this);"" onMouseOut=""remetCouleur(this);"">"

Mon tableau ce rempli grace a une boucle.

Le code source généré

Code :

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

1
2
<table  cellspacing='0' cellspacing='0' id='tb' class='tb'>
<tr id='aff_1' onMouseOver="changeCouleur(this);" onMouseOut="remetCouleur(this);">

**andry.aime** · 18/08/2011, 11h51

Bonsoir,

Essaye avec

Code :

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

ligne.style.backgroundColor = '#C0C0C0';

A+.

**xouzi** · 18/08/2011, 11h57

Sa change rien

**andry.aime** · 18/08/2011, 12h06

Ce code fonctionne chez moi (tester sous IE et FF)

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
html>
<head>
<script type="text/javascript">
function changeCouleur(ligne)
  {
	ligne.style.backgroundColor = '#C0C0C0';
  }
 
function remetCouleur(ligne)
  {
	ligne.style.backgroundColor = '#FFFFFF';
  }
</script>
</head>
<body>
<table>
	<tr onmouseover="changeCouleur(this);" onmouseout="remetCouleur(this)">
		<td>blabla</td>
		<td>blabla</td>
	</tr>
	<tr onmouseover="changeCouleur(this);" onmouseout="remetCouleur(this)">
		<td>blabla</td>
		<td>blabla</td>
	</tr>
</table>
</body>
</html>

**xouzi** · 18/08/2011, 12h46

Donc le JS et bon sa doit venir de l'ASP alors pourtant la page html généré parrait correct

Mon tableau et dans un scrollbar est ce que sa peut avoir une explication? Sinon sa peut pas venir de l'id?

**andry.aime** · 18/08/2011, 12h53

ça ne doit pas venir du scrollbar.
Tes balises sont biens fermé? Ton Javascript est dans le même fichier?
Peut-on voir un peu plus sur ton code HTML généré?

PS: met tous tes attributs en minuscule.

A+.

**xouzi** · 18/08/2011, 13h47

Les lignes doivent changer de couleur dans mon deuxiemes tableaux .
J'ai essayer de faire au plus cour:

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
<html>
<head>
<title>Principal</title>
<link rel='stylesheet' type='text/css' href='style.css' /> 
<script src='functions_saisie.js' type='text/javascript'></script>
</head>
<body>
 
<script type="text/javascript"> 
function changeCouleur(ligne)
  {
	ligne.style.backgroundColor = '#C0C0C0';
  }
 
function remetCouleur(ligne)
  {
	ligne.style.backgroundColor = '#FFFFFF';
  }
 
 
</script>
 
 
<table  cellpadding='0' cellspacing='0' id='tb_p' class='tb_p'>
	<tr>
		<th class='tb_parc_entete_test'><nobr>Valid</nobr></th>
		<th class='tb_parc_entete_2'><nobr>Jour</nobr></th><th class='tb_p_1'><nobr>Date</nobr></th>
	</tr>
</table>
<div class='scrollbar_vertical'>
	<p style='direction:ltr'>
		<table  cellspacing='0' cellspacing='0' id='tb' class='tb'>
			<tr id='aff_ligne_1' onmouseover="changeCouleur(this);" onmouseout="remetCouleur(this)">
				<td class='tb_2'>
					<a href="javascript:aff_zones('1')" title="Modifier la saisie" ><img src="img/ico_act_modif.gif" /></a>
				<td bgcolor='#FFFFFF'  style=''>
					LUN.
				</td>
			</tr>
			<tr id='aff_ligne_3' onmouseover="changeCouleur(this);" onmouseout="remetCouleur(this)">
				<td class='tb_2'>
					<a href="javascript:aff_zones('3')" title="Modifier la saisie" ><img src="img/ico_act_modif.gif"/></a>
				</td>
				<td bgcolor='#FFFFFF'  style=''>
					MAR.
				</td>
			</tr>
		</table>
	</p>
</div>
</body>
</html>