Coloration des lignes d'un tableau OnClick
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:
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" :mouarf:
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:
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
