Coloration des lignes d'un tableau OnClick

**Camomille** · 31/12/2007, 18h25

Salut à vous,

veuillez excuser ce titr barbare mais il résume assez bien la situation!

Dans un tableau html/php j'aimerais pouvoir attribuer une couleur à une ligne d'un coup de click. Jusqu'à présent, j'arrive à attribuer une couleur à une ligne grâce au MouseOver & MouseOut.

La centaine de lignes du tableau sont générées par une requête php/mysql.
Rien ne vaut un exemple, voici à quoi ressemble la portion de script qui nous intéresse:

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
<TABLE CELLPADDING=1 CELLSPACING=0 BORDER=0 WIDTH=100%> 
<TR bgcolor="#FFCC99"> 
<TD width="1%" bgcolor="#FFCC99"> <div align="center"><font size="2" face="verdana"><strong><font color="#990000">Nom</font></strong></font></div></TD> 
<TD width="10%"> <div align="center"><font color="#990000" size="1" face="verdana"><strong>El.</font></div></TD>
<TD width="10%"> <div align="center"><font color="#990000" size="1" face="verdana"><strong>Recalculer </strong></font></div></TD>
</TR> 
 
<?php
$year=@$_GET["year"];
 
require("conf.php3");
$background = "";
 
// SELECTION DE L'ENREGISTREMENT CONTENANT L'ID EN COURS
$requete=mysql_db_query($sql_bdd,"select * from table ",$db_link) or die(mysql_error());
$i=0;
while($parcours = mysql_fetch_array($requete)) 
{ 
$background++; 
 
if ($background%2) { 
$hexa = "#00FFCC"; 
} 
else { 
$hexa = "#33CCCC";
} 
 
//echo "<tr bgcolor=$hexa>";
echo "<tr  BGCOLOR=$hexa onMouseOut=javascript:this.style.background='$hexa' onMouseOver=javascript:this.style.background='#CC6699'>"; 
print ("<td width=15%> <div align=center><b><font size=1 face=verdana><a href='../client.php?num=$parcours[Client_num]&id=".$i."'>".$parcours['nom']."</a></font></div></td>\n");
print ("<td width=15%> <div align=center><b><font size=1 face=verdana><a href='fpdf/forfaits/persopdf.php?num=$parcours[Client_num]'>".$parcours['Prenom']."</a></font></div></td>\n"); 
print ("<td width=5%> <div align=center><b><font size=1 face=verdana>$parcours[index_new]</font></div></td>\n");

J'ai viré des lignes pour fair plus léger, même si je sais que vous trouverez mon script plutôt "lourd"

J'avais trouvé un beau script sur la toile. Comme les lignes du tableau doivent avoir un "id", je ne vois pas comment y intégrer mon tableau php!
Voilà le script en question:

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
<html>
<head>
<title>Exemple</title>
<style type="text/css">
<!--
.TR_Normal { background-color: #3399FF} 
.TR_Survol { background-color: #000099} 
.TR_Clique { background-color: #FFCC00} 
-->
</style>
<script language="JavaScript"> 
<!-- 
function Change(id, Mode) { 
	var Etat = document.getElementById("TR"+id).className; 
	switch(Mode) { 
 		case "Over": 
  			if(Etat!="TR_Clique") 
   				document.getElementById("TR"+id).className="TR_Survol"; 
  				break; 
 		case "Out": 
  			if(Etat!="TR_Clique") 
   				document.getElementById("TR"+id).className="TR_Normal"; 
  				break; 
 		case "Click": 
  			if(Etat=="TR_Clique") 
   				document.getElementById("TR"+id).className="TR_Survol"; 
  			else 
   				document.getElementById("TR"+id).className="TR_Clique"; 
  				break; 
	}  
} 
//--> 
</script>
</head>
 
<body>
<div align="center">
  <TABLE>
    <TR id="TR1" class="TR_Normal" onMouseOver="Change(1,'Over');" onMouseOut="Change(1,'Out');" onClick="Change(1,'Click');"> 
      <TD width="200" height="100"> </TD>
    </TR> 
<TR id="TR2" class="TR_Normal" onMouseOver="Change(2,'Over');" onMouseOut="Change(2,'Out');" onClick="Change(2,'Click');">
      <TD width="200" height="100"> </TD>
    </TR> 
    <TR id="TR3" class="TR_Normal" onMouseOver="Change(3,'Over');" onMouseOut="Change(3,'Out');" onClick="Change(3,'Click');"> 
      <TD width="200" height="100"> </TD>
    </TR> 
</TABLE> 
</div>
</body>
</html>

Merci pour vos bons conseils et bon 2008 à tous.

Camomille

**Camomille** · 01/01/2008, 18h02

Salut à vous,

pour info, j'ai trouvé une solution "passable" en adaptant " à ma manière" le script trouvé sur le net. Voici ce qui marche chez moi. J'ai perdu l'alternance des couleurs de lignes mais en affichant les bordures, je m'y retrouve!Ce n'est pas aussi rapide que du pur js mais ça fonctionne !!

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
96
97
98
99
100
101
102
103
104
105
<html>
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>Tous Forfaits </title>
<style type="text/css">
<!--
.TR_Normal { background-color: #00FFCC} 
.TR_Survol { background-color: #3399FF} 
.TR_Clique { background-color: #FFCC00} 
-->
</style>
<script language="JavaScript"> 
<!-- 
function Change(id, Mode) { 
	var Etat = document.getElementById("TR"+id).className; 
	switch(Mode) { 
 		case "Over": 
  			if(Etat!="TR_Clique") 
   				document.getElementById("TR"+id).className="TR_Survol"; 
  				break; 
 		case "Out": 
  			if(Etat!="TR_Clique") 
   				document.getElementById("TR"+id).className="TR_Normal"; 
  				break; 
 		case "Click": 
  			if(Etat=="TR_Clique") 
   				document.getElementById("TR"+id).className="TR_Survol"; 
  			else 
   				document.getElementById("TR"+id).className="TR_Clique"; 
  				break; 
	}  
} 
//--> 
</script>
</head>
 
 
 
<TABLE CELLPADDING=1 CELLSPACING=0 BORDER=1 WIDTH=100%> 
<TR bgcolor="#FFCC99"> 
<TD width="1%" bgcolor="#FFCC99"> <div align="center"><font size="2" face="verdana"><strong><font color="#990000">Nom</font></strong></font></div></TD> 
<TD width="1%" bgcolor="#FFCC99"> <div align="center"><font size="2" face="verdana"><strong><font color="#990000">Prénom</font></strong></font></div></TD> 
<TD width="10%" bgcolor="#FFCC99"><div align="center"><font color="#990000" size="2" face="verdana"><strong>Parcelle</strong></font></div></TD> 
<TD width="10%"> <div align="center"><font face="verdana"><strong><font color="#990000" size="2">Empl</font></strong></font><font color="#990000" size="1" face="verdana"></font></div></TD> 
<TD width="10%"> <div align="center"><font color="#990000" size="2" face="verdana"><strong>Adultes </strong></font></div></TD> 
<TD width="10%"> <div align="center"><font color="#990000" size="2" face="verdana"><strong>Enfants </strong></font></div></TD>
<TD width="10%"> <div align="center"><font color="#990000" size="2" face="verdana"><strong>Index new </strong></font></div></TD>
<TD width="10%"> <div align="center"><font color="#990000" size="2" face="verdana"><strong>Index last </strong></font></div></TD>
<TD width="10%"> <div align="center"><font color="#990000" size="2" face="verdana"><strong>El.</font></div></TD>
<TD width="10%"> <div align="center"><font color="#990000" size="2" face="verdana"><strong>Entret.</strong></font></div></TD>
<TD width="10%"> <div align="center"><font color="#990000" size="2" face="verdana"><strong>2ème Auto </strong></font></div></TD>
<TD width="10%"> <div align="center"><font color="#990000" size="2" face="verdana"><strong>Eau </strong></font></div></TD>
<TD width="10%"> <div align="center"><font color="#990000" size="2" face="verdana"><strong>Solde Année </strong></font></div></TD>
<TD width="10%"> <div align="center"><font color="#990000" size="2" face="verdana"><strong>Total </strong></font></div></TD>
<TD width="10%"> <div align="center"><font color="#990000" size="2" face="verdana"><strong>Recalculer </strong></font></div></TD>
</TR> 
 
<?php
$year=@$_GET["year"];
 
require("connect.php3");
$background = "";
 
// SELECTION DE L'ENREGISTREMENT CONTENANT L'ID EN COURS
$requete=mysql_db_query($sql_bdd,"select * from table ",$db_link) or die(mysql_error());
$i=0;
while($parcours = mysql_fetch_array($requete)) 
{ 
$background++; 
 
if ($background%2) { 
$hexa = "#00FFCC"; 
} 
else { 
$hexa = "#33CCCC";
} 
 
echo "<TR id=TR$parcours[numero] class=TR_Normal onMouseOver=Change($parcours[numero],'Over'); onMouseOut=Change($parcours[numero],'Out'); onClick=Change($parcours[numero],'Click');> 
      "; 
print ("<td width=15%> <div align=center><b><font size=2 face=verdana><a href='../client.php?num=$parcours[Client_num]&id=".$i."'>".$parcours['nom']."</a></font></div></td>\n");
print ("<td width=15%> <div align=center><b><font size=2 face=verdana><a href='fpdf/forfaits/persopdf.php?num=$parcours[Client_num]'>".$parcours['Prenom']."</a></font></div></td>\n"); 
print ("<td width=10%> <div align=center><b><font size=2 face=verdana>$parcours[emplacement]</font></div></td>\n"); 
print ("<td width=15%> <div align=center><b><font size=2 face=verdana>$parcours[cout_emplact]</font></div></td>\n"); 
print ("<td width=15%> <div align=center><b><font size=2 face=verdana>$parcours[cout_adultes]</font></div></td>\n"); 
print ("<td width=5%> <div align=center><b><font size=2 face=verdana>$parcours[cout_enfant]</font></div></td>\n"); 
print ("<td width=5%> <div align=center><b><font size=2 face=verdana>$parcours[index_new]</font></div></td>\n");
print ("<td width=15%> <div align=center><b><font size=2 face=verdana>$parcours[index_last]</font></div></td>\n");
print ("<td width=15%> <div align=center><b><font size=2 face=verdana>$parcours[cout_elect]</font></div></td>\n");
print ("<td width=15%> <div align=center><b><font size=2 face=verdana>$parcours[cout_entretien]</font></div></td>\n");
print ("<td width=15%> <div align=center><b><font size=2 face=verdana>$parcours[cout_auto2]</font></div></td>\n");
print ("<td width=15%> <div align=center><b><font size=2 face=verdana>$parcours[cout_eau]</font></div></td>\n");
print ("<td width=15%> <div align=center><b><font size=2 face=verdana>$parcours[solde_annee]</font></div></td>\n");
print ("<td width=15%> <div align=center><b><font size=2 face=verdana>$parcours[total]</font></div></td>\n");
print ("<td width=15%> <div align=center><b><font size=2 face=verdana><a href='one_personnes.php?year=$annee&num=$parcours[Client_num]'>Go !!</font></div></td>\n");
print ("</tr>\n"); 
 
$i++;
 
} 
 
 
?>
</body>

Un bon 2008 à tous les developpeurs, programmeurs, codeurs et escribouilleurs comme moi

.

Camo

Coloration des lignes d'un tableau OnClick

JavaScript

Discussions similaires

Partager

Partager