Changer la couleur d'une cellule

**Atemi76** · 13/08/2007, 12h52

Bonjour,

Voilà mon problème : je souhaite, lorsque l'utilisateur clique sur une cellule d'un tableau, changer la couleur de celle-ci. En fait, à chaque fois qu'il clique, la couleur change dans cet ordre : blanc, vert, orange et rouge (puis de nouveau blanc etc ...).

Voilà comment j'ai codé une cellule du tableau :

<td id="<?php echo $row_RSResultats['id_eleve'].'_'.$row_RSResultats['id_Competence'].'_'.'1'; ?>" align="left" valign="top" style="background:<?php echo Couleur($row_RSResultats['Evaluer1']);?>" onclick="Evaluer(this.style.backgroundColor,this.id);"> </td>

explications :
id : l'id est créé dynamiquement pour que je puisse accéder à chaque cellule
par un document.GetelementbyId.

style : je colorie dès le départ la cellule par une couleur correspondant à la
valeur d'un champ dans une table via une fonction en php (ça marche
très bien). Les valeurs renvoyées sont '#FFFFFF' (blanc), '#00FF00'
(vert), '#FF9933' (orange) ou '#FF0000' (rouge).

onclick : c'est là que ça se complique pour moi, lorsque l'on clique sur la
cellule, la fonction Evaluer doit changer le contenu de la cellule
(juste pour tester) et changer la couleur du fond.

Voici la fonction Evaluer :

function Evaluer(Valeur,id,Cellule) {
document.form1.TCellule.value=Valeur;
switch (Valeur) {
case '#FFFFFF': // si c'est blanc
Cellule.innerHTML='a';
Cellule.style.backgroundColor='#00FF00'; // on passe au vert
break;
case '#00FF00': // si c'est vert
Cellule.innerHTML='e';
Cellule.style.backgroundColor='#FF9933'; // on passe au orange
break;
case '#FF9933': // si c'est orange
Cellule.innerHTML='n';
Cellule.style.backgroundColor='#FF0000'; // on passe au rouge
break;
case '#FF0000': // si c'est rouge
Cellule.innerHTML='r';
Cellule.style.backgroundColor='#FFFFFF'; // on passe au blanc
break;
}
}

La premiere ligne de la fonction affiche dans un 'text field' la valeur de la couleur (pour voir si la couleur est bien envoyée dans le paramètre Valeur) : ça, ça marche. Mais pour le reste, le contenu de la cellule ne change pas ni son fond coloré.

J'ai même essayé avec 'document.GetelementbyId' :

function Evaluer(Valeur,id) {
document.form1.TCellule.value=Valeur;
switch (Valeur) {
case '#FFFFFF':
document.getElementById(id).innerHTML='e';
document.getElementById('id').style.background='#FF9933';
break;
case '#00FF00':
document.getElementById(id').innerHTML='e';
document.getElementById(id).style.background='#FF9933';
break;
case '#FF9933':
document.getElementById(id).innerHTML='n';
document.getElementById(id).style.background='#FF0000';
break;
case '#FF0000':
document.getElementById(id).innerHTML='r';
document.getElementById(id).style.background='#FFFFFF';
break;
}
} avec seulement deux paramètres.

Et lorsque je change directement le contenu de la cellule dans le code de la cellule, ça marche : "... onclick="this.style.backgroundColor='#FF0000';" ..."

Quelqu'un a-t-il une idée ?

Merci,

Denis.

**LexWizard** · 13/08/2007, 13h05

C'est parce que les valeurs des couleurs retournée sont en minuscule
This.style.backgroundColor va te renvoyer "#ff0000" par exemple.

Et pour changer la couleur :
avec onclick="Evaluer(this.style.backgroundColor, this);"

Code :

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

id.style.backgroundColor = '#000000';

avec onclick="Evaluer(this.style.backgroundColor, this.id);"

Code :

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

document.getElementById(id).style.backgroundColor = '#000000';

**Atemi76** · 13/08/2007, 13h15

Non, ça ne fait toujours rien ... J'ai modifié comme suit :

function Evaluer(Valeur,id) {
document.form1.TCellule.value=Valeur;
switch (Valeur) {
case '#ffffff':
document.getElementById(id).innerHTML='a';
document.getElementById(id).style.backgroundColor='#00ff00';
break;
case '#00ff00':
document.getElementById(id).innerHTML='e';
document.getElementById(id).style.backgroundColor='#ff9933';
break;
case '#ff9933':
document.getElementById(id).innerHTML='n';
document.getElementById(id).style.backgroundColor='#ff0000';
break;
case '#ff0000':
document.getElementById(id).innerHTML='r';
document.getElementById(id).style.backgroundColor='#ffffff';
break;
}
}

**LexWizard** · 13/08/2007, 13h29

Et le onclick est bien comme ça ?

Code :

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

onclick="Evaluer(this.style.backgroundColor, this.id);"

Tu as une erreur ou ça ne fonctionne pas dutout ?

**Atemi76** · 13/08/2007, 13h37

Oui l'appel est bien de cette forme mais rien ne se produit au niveau de la cellule. Par contre, le "text field" affiche la Valeur de la couleur sous la forme 'rgb(255,255,255)'.

Voilà voilà

**LexWizard** · 13/08/2007, 13h39

Tu n'as donc pas d'erreur ?

Fait un alert(Valeur); Pour voir se qu'elle contient lors de l'appelle.

**mat453** · 13/08/2007, 14h21

Cela marche tres bien, c'est exactmeent ce que je fais.

Par contre, moi j'ai un probleme c'est que mon id represente en fait une colonne d'un tableau. Comme dois je faire pour reperer la ligne car la il me colore toujours la 1ere??

Merci

**LexWizard** · 13/08/2007, 14h34

Envoyé par mat453

Cela marche tres bien, c'est exactmeent ce que je fais.

Par contre, moi j'ai un probleme c'est que mon id represente en fait une colonne d'un tableau. Comme dois je faire pour reperer la ligne car la il me colore toujours la 1ere??

Merci

Tu veux dire que l'id est identique pour toutes les cellules de chaque colonne ?
genre :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
<table>
<tr>
<td id="col1"></td>
<td id="col2"></td>
</tr>
<tr>
<td id="col1"></td>
<td id="col2"></td>
</tr>
</table>

Si c'est le cas, c'est normal que ton code javascript ne marche pas. Donne des ID differents pour chaque cellule.

**mat453** · 13/08/2007, 14h51

non en fait c'est un tableau, je ma sui smal exprimé,

Exactment, j'itere sur un bean, puisque c'est dans une jsp de struts.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
<logic:iterate
          length='<%=nbligne%>' 
          indexId="index" 
<tr>
<td id="col1"></td>
<td id="col2"></td>
<td id="col3"></td>
<td id="col4"></td>
</tr>
</logic>

**LexWizard** · 13/08/2007, 15h06

La je commence à me noyer

Si j'ai bien compris, la fonction marche, mais change la couleur le la 1cellule du la colonne où à eu lieu le clic ?

Dans le cas d'une deuxième ligne, les id ressemble à quoi?

**mat453** · 13/08/2007, 15h27

si tu vx, en convertisant le tableau struts en html ca pourrait donner ca:

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
 
<table>
<tr>
<td id="col1"></td>
<td id="col2"></td>
<td id="col3"></td>
<td id="col4"></td>
</tr>
<tr>
<td id="col1"></td>
<td id="col2"></td>
<td id="col3"></td>
<td id="col4"></td>
</tr>
<tr>
<td id="col1"></td>
<td id="col2"></td>
<td id="col3"></td>
<td id="col4"></td>
</tr>.........
</table>

**LexWizard** · 13/08/2007, 15h31

C'est bien ce que je dis, un ID doit être unique.
Trouve une solution pour faire que chaque ID soit unique.

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
 
<table>
<tr>
<td id="col1_0"></td>
<td id="col2_0"></td>
<td id="col3_0"></td>
<td id="col4_0"></td>
</tr>
<tr>
<td id="col1_1"></td>
<td id="col2_1"></td>
<td id="col3_1"></td>
<td id="col4_1"></td>
</tr>
<tr>
<td id="col1_2"></td>
<td id="col2_2"></td>
<td id="col3_2"></td>
<td id="col4_2"></td>
</tr>.........
</table>

**mat453** · 13/08/2007, 15h37

un id doit etre unique...

sauf qd tu fais une iteration sur un bean, puisque l' id est le nom du champs dans le bean.

**Atemi76** · 13/08/2007, 17h04

Bon je suis de retour,

Lorsque je fais alert(Valeur) dans la fonction Evaluer, la fenêtre indique :

rgb(255,255,255)

Voilà, mais la cellule ne se colorie pas, je vais essayer, dans les 'case' d'indiquer des couleurs sous la forme rgb plutôt que #FFFFFF ...

On va voir ...

Denis.

**Atemi76** · 13/08/2007, 17h08

Bon, j'ai essayé, ça ne change rien. Je pense que le problème vient du test :

case '#ffffff': ... etc puisque j'ai placé un alert(Valeur) après le "case '#ffffff' " et la fenêtre ne s'affiche pas alors que la couleur de la cellule est le blanc. Donc je pense que #ffffff ne convient pas. Mais alors POURQUOI ? Alors là !!!

Denis.

**Atemi76** · 13/08/2007, 20h49

Ca y est j'ai trouvé : en fait j'ai utilisé les constantes 'red' 'white' 'green' et 'orange' dans mes tests et au début lorsque l'on affecte la couleur à 'style.backgroundColor' à la place des codes en hexadécimal (#ffffff etc ...) et ça marche ...

Le problème est que je ne vois pas pourquoi ça ne marchait pas avant

Donc pour moi c'est RESOLU !!!

Changer la couleur d'une cellule

JavaScript

Discussions similaires

Partager

Partager