[HTML, CSS, JS] Clic sur une cellule d'un tableau pour changer sa class CSS

Version imprimable

20/08/2007, 18h08
Nyphel

[HTML, CSS, JS] Clic sur une cellule d'un tableau pour changer sa class CSS

Bonsoir,

J'utilise un simple tableau HTML généré par du code PHP (Les données du tableau sont stockées dans une base de données mysql).
Chaque cellule du tableau dispose d'une classe CSS qui déterminera sa couleur de fond (Cette classe est attribuée dynamiquement, en fonction des données contneues dans la cellule).

Je ne parviens pas à faire en sorte qu'en cliquant une cellule du tableau, la classe CSS soit modifiée (Classe "fond_jaune" plutôt que "fond_rouge", par exemple).

Deux problèmes se posent donc :
- Comment détecter un clic dans une cellule d'un tableau (n'importe où dans la cellule)
- Comment changer la classe de style de cette cellule du tableau

Pourriez-vous m'aider, s'il vous plait ? :)
21/08/2007, 08h47
trotters213

:salut:
Une réponse t'interesse toujours ?

Magie : :applo: :applo: :applo: :applo:

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
<html>
<head>
<style type="text/css">
.rouge{
        background-color:#ff0000;
}
.vert{
        background-color:#00ff00;
}
.bleu{
        background-color:#0000ff;
}
.jaune{
        background-color:#ffff00;
}
.magenta{
        background-color:#ff00ff;
}
.cyan{
        background-color:#00ffff;
}
</style>
<script>
<!--
        function changeClasse(td, couleur){
                td.className = couleur;
        }
-->
</script>
</head>
<body>
<table border="border">
	<tr><td class="rouge" onclick="changeClasse(this, 'vert');">1</td><td class="vert" onclick="changeClasse(this, 'bleu');">2</td><td class="bleu" onclick="changeClasse(this, 'jaune');">3</td></tr>
	<tr><td class="jaune" onclick="changeClasse(this, 'magenta');">4</td><td class="magenta" onclick="changeClasse(this, 'cyan');">5</td><td class="cyan" onclick="changeClasse(this, 'rouge');">6</td></tr>
</table>
</body>
</html>

21/08/2007, 13h18
Nyphel

Bonjour :)

Merci pour la solution !
Pour ma part j'avais fait quelque chose similaire, en passant non pas "this()" mais l'ID de la cellule :)

A ce propos cool les tutoriels CSS et la FAQ CSS !