Discussion :

[jean1190]

Bonjour,

J'ai un tableau généré dynamiquement en PHP qui représente le planning du mois en cours.

Afin de faciliter la lisibilité, on m'a demandé de créer un petit input text où lorsque l'on rentre le nom d'une personne, toutes les occurrences présentes dans le tableau prennent une couleur particulière.

Pour le moment, toutes les cellules de mon tableau ont une classe prédéfinie : Class = couleur_normale. Lorsque l'on rentre le nom d'une personne, la class devient class= couleur_select.

Voici mon code :

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
function colorer(){
			var nom = document.getElementById('nom').value;
			var tab = document.getElementsByClassName('couleur_normale');
			for (i in tab)
			{
				if (tab[i].innerHTML == nom)
				{
					tab[i].className = "couleur_select";
				}
				else
				{
					tab[i].className = "couleur_normale";
				}
			}
		}

La fonction getElementsByClassName est implémentée plus bas et marche sans problème.

Mon soucis : lorsque je clique une première fois sur mon bouton "colorer", tous les noms se colorent parfaitement bien. Et si je rentre le nom d'un nouveau médecin, il se colore à son tour, mais l'ancien reste aussi coloré (et avec firebug je constate que toutes les occurrences de l'autre médecin restent avec la classe "couleur_select".

J'ai coloré en rouge la partie du code qui ne fonctionne pas. Quelqu'un pourrait m'expliquer pourquoi ? Ca devrait sauter aux yeux mais j'vois pas

[andry.aime]

Salut,
Essaye de ne pas passer les éléments dans une variable

Code JAVASCRIPT :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function colorer(){
			var nom = document.getElementById('nom').value;
			for (var i=0 ; i<document.getElementsByClassName('couleur_normale').length; i++)
			{
				if (document.getElementsByClassName('couleur_normale')[i].innerHTML == nom)
				{
					document.getElementsByClassName('couleur_normale')[i].className = "couleur_select";
				}
				else
				{
					document.getElementsByClassName('couleur_normale')[i].className = "couleur_normale";
				}
			}
		}

[jean1190]

J'ai copié-collé tel quel, et plus rien ne marche.

En essayant de vérifier s'il n'y avait pas une petite faute quelque part dans ton code, je n'ai rien trouvé. Donc je refais appel à toi/vous :p

[asagtoth]

salut, sinon juste avant de colorer le nom du nouveau médecin réinitialise toutes les classes avec la valeur initiale. De ce fait le nom du médecin sélectionné précédément reprendra la couleur d'origine

[jean1190]

En fait c'était idiot comme démarche.

Ma variable "tab" ne contient que les cellules ayant pour classe "couleur_normale". Or, après un premier passage, je dois aussi parcourir les cellules ayant comme classe "couleur_select" (celles déjà sélectionnées).