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

**Nyphel** · 20/08/2007, 18h08

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 ?

**trotters213** · 21/08/2007, 08h47

Une réponse t'interesse toujours ?

**Tober** · 21/08/2007, 09h21

Magie :

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
<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>

**Nyphel** · 21/08/2007, 13h18

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 !

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

HTML

Discussions similaires

Partager

Partager