Changer la couleur d'une cellule

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);">&nbsp;</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.

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:

---

id.style.backgroundColor = '#000000';

---

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

Code:

---

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

---

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

:( :( :(

Et le onclick est bien comme ça ?

Code:

---

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

---

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

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à :( :?

Tu n'as donc pas d'erreur ?

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

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

Citation:

---

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:

---

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.

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:

---

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>

---

La je commence à me noyer :aie: :D

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?

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

Code:

---

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>

---

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

Code:

---

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>

---

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.

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.

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à !!! 8O

Denis.

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

Donc pour moi c'est RESOLU !!!:yaisse2: