Modifier la couleur d'un <td> par une fonction javascript

AFPA2003 Messages postés 35 Date d'inscription vendredi 4 avril 2003 Statut Membre Dernière intervention 22 mai 2013 - 26 mai 2011 à 17:39
AFPA2003 Messages postés 35 Date d'inscription vendredi 4 avril 2003 Statut Membre Dernière intervention 22 mai 2013 - 30 mai 2011 à 08:04
Bonjour,

J'ai un tableau HTML avec plusieurs colonnes et plusieurs lignes.
Chaque case est identifiée par un NumCase
A l'origine chaque case est blanche et contient 0

J'aimerai écrire une fonction MaFonction sur l'évènement ONCLICK, qui :
- incrémenterait de +1 la valeur contenue dans la case cliquée
- changerait la couleur de la case en fonction de l'incrémentation et d'un tableau de couleur
- mémoriserait l'ordre des cases cliquées (ça je sais faire)

ce qui me donne en simplifié :

<script type="text/javascript">
var DesCouleurs = Array("cyan","kaki","purple","yellow","red");
var HistoClick ='';
function MaFunction(dep)
{ HistoClick = HistoClick + ',' + dep;
NewColor = DesCouleurs(dep);
VarMachin = document.getElementById("MyTab");

?????????????????????
}
</script>

0



Mon problème, est que je n'arrive pas à changer la couleur de la case à partir de ma fonction.
Je ne me suis pas encore penché sur le changement de la valeur.

J'ai essayé avec
VarMachin = document.getElementById("NumCase");
Varmachin.this.style.backgroundColor = 'MyNewColor'"
Varmachin.style.backgroundColor = 'MyNewColor'"
Varmachin.backgroundColor = 'MyNewColor'"

mais je n'ai pas réussi.

En résumé, je n'arrive pas à trouver le "chemin d'accès direct" aux propriétés de la case <td> d'un tableau.

Votre aide sera la bienvenue.

PS: il se peut que je n'ai pas écrit au bon endroit, merci de m'en informer que je puisse déplacer cette demande d'aide








~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Quand je ne dit rien, c'est que je ne sais pas.
Quand je demande c'est que je n'ai pas trouvé.
Quand je renseigne, c'est que le pense savoir
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

2 réponses

cs_jopop Messages postés 1540 Date d'inscription lundi 26 mai 2003 Statut Membre Dernière intervention 1 août 2013 12
27 mai 2011 à 10:06
Salut,

perso je passerai le TD en paramètre, comme suit :
<td bgcolor="White" onclick="MaFonction(this);">0</td>


la fonction ressemblerait alors à ça :

var DesCouleurs = new Array("cyan", "kaki", "purple", "yellow", "red");
function MaFonction(me) {
var iVal = parseInt(me.innerHTML);
var iIdx = (iVal >= DesCouleurs.length) ? DesCouleurs.length - 1 : iVal;
me.bgColor = DesCouleurs[iIdx];
me.innerHTML =  iVal + 1;
}


Code testé ;)

NB : "kaki" n'a pas l'air d'être une couleur nommée valide
0
AFPA2003 Messages postés 35 Date d'inscription vendredi 4 avril 2003 Statut Membre Dernière intervention 22 mai 2013
30 mai 2011 à 08:04
ta soluce semble bien plus simple que la mienne, ...
je vais l'adopter

voici mon bout de code bidouillé :
en construisant mon tableau sous php, je passais dans le onclick, les coordonnées du tableau (row et cell) et avec un split sous javascript je modifiais la couleur tout mémorisant ces coordonnées dans une var globale.

j'ai oublié un h dans kaki, désolé.

Merci pour ton coup de pouce

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Quand je ne dit rien, c'est que je ne sais pas.
Quand je demande c'est que je n'ai pas trouvé.
Quand je renseigne, c'est que le pense savoir
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
0
Rejoignez-nous