begin process at 2012 05 29 10:31:52
  Trouver un code source :
 
dans
 
Accueil > Forum > 

Javascript / DHTML / Ajax

 > 

CSS

 > 

Général

 > 

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


Derniers messages déposésPoser une question dans le forum ou lancer une discussion

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

jeudi 26 mai 2011 à 17:39:21 | modifier la couleur d'un <td> par une fonction javascript

AFPA2003


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>

<table id='MyTab'><tr>
<td id='NumCase' bgcolor ='white' ONCLICK="javascript:MaFonction('NumCase');">0</td>
-------
</tr></table>


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
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
vendredi 27 mai 2011 à 10:06:08 | Re : modifier la couleur d'un <td> par une fonction javascript

jopop

Salut,

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


la fonction ressemblerait alors à ça :

Code Javascript :
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
lundi 30 mai 2011 à 08:04:19 | Re : modifier la couleur d'un <td> par une fonction javascript

AFPA2003


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


Cette discussion est classée dans : fonction, couleur, tableau, case, varmachin


Répondre à ce message

Sujets en rapport avec ce message

Passage de tableau en paramètre d'une fonction [ par Mask ] Je génère un tableau nommé "Tab"contenant des nombres en PHP....jusqu'ici tout va bien: mon tableau se rempli des valeurs souhaitées.Ensuite je veux f Passage de tableau en paramètre d'une fonction [ par Mask ] Y a t il des subtilités à connaitre quant au passage passage de tableaux en paramètre pour des fonctions par rapport au passage de chaînes de caractèr changer la couleur des cellules d'un tableau [ par basti ] Bonjour tout le monde,J'aimerais changer la couleur des cellules d'un tableau. Le probleme est que je suis débutant en Javascript alors jai choper la Couleur d'une cellule d'un tableau html [ par ypothier ] Est-ce que quelqu'un pourrai m'aider. J'ai un tableau HTML bien simple. Mais j'aimerai être capable de modifier la class à laquel il appartient dans u Changement de couleur de cellules dans un tableau [ par krevette ] Bonjour tt le mondej'aimerais changer la couleur des cellules d'un tableau (jusque la pas de probleme). Mais ce qu'il y a c'est que je voudrais change Comment changer la couleur d'un tableau avec Netscape ? [ par nicolos ] BonjourJe voudrais savoir comment pouvoir changer la couleur d'un tableau, ou plutôt d'une cellule à partir de son identifiant pour que cela puisse ma La porté d'un array en javascript [ par maxxcbenny ] Bonjour,Comment faire pour passer un tableau de type array dans une fonction en javascript ?Parce que voici ce que j'ai codé :var montableau=new array Remplir un tableau en fonction d'un SELECT [ par simsai ] Bonjour,mon probleme: je ne vois pas comment faire pour remplir le contenu d'un tableau en fonction de la selection de mon select?J'ai une page que j' Dimensionner un tableau en fonction de la résolution. [ par gabrielmaraval ] Bonjour,Voila en fait j'ai crée un tableau sur une page internet, mais le problème, c'est ue pour une résolution plus petite à la mienne, le tableau s Ha... je ne sais pas comment m en sortir sur ste question de javascript [ par sammer ] a)Ecrivez le code de la fonction initialise() qui utilise la fonction « Math.random () » pour remplir le tableau « valeur » avec des nombres variants


Nos sponsors


Sondage...

Comparez les prix

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir



 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 1,638 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales