colorier la dernière cellule cliquée d'un tableau

Sujet résolu

17 juin 2010 à 9:34:57

Bonjour

J'ai un tableau HTML avec 10 cellules blanches.

Je voudrais que la dernière case cliquée soit coloriée en jaune.

exemple:
- on clique sur la case 2, elle devient jaune.
- on clique sur la case 7, la case 2 redevient blanche et la 7 devient jaune.
- etc...

Le coloriage ça j'y arrive,

<td id = "cellX" onclick = "this.style.backgroundColor='yellow';">X</td>

(X de 1 à 10)

Mais l'effaçage de la case cliquée précédemment, j'y arrive pas.

J'ai essayé une variable globale au début de ma page:

<script type="text/javascript">
var old_cell = '0';
</script>

et modifié mes onclick comme ça:

<td id = "cellX" onclick = "this.style.backgroundColor='yellow'; document.getElementById(old_cell).style.backgroundColor='white'; old_cell = 'cellX';">X</td>

Mais ça ne marche pas, old_cell reste à 0 et je ne comprends pas pourquoi.

Quelqu'un aurait une (autre) solution?

Merci

Noname42

17 juin 2010 à 10:07:09

Pour rester dans ta logique, je te propose une solution, qui ne sera pas forcément la meilleure, mais qui fonctionne :

<html>
	<head>
	</head>
	<body>
		<table>
			<tr>
				<td onclick="blanc();this.style.backgroundColor='yellow';">niaws</td>
				<td onclick = "blanc();this.style.backgroundColor='yellow';">uhuh</td>
				<td onclick = "blanc();this.style.backgroundColor='yellow';">lololol</td>
			</tr>
		</table>
		
		<script>
		function blanc()
		{
				var cases = document.getElementsByTagName('td');
				for (var i=0; i<cases.length; i++)
					cases[i].style.backgroundColor="white";
		}
		</script>
	</body>
</html>

Ca te va ? Pour le fonctionnement, il n'est pas dur à comprendre. Une fonction "blanc" se charge de définir un fond blanc pour TOUTES les cases du tableau.
A chaque clic sur une case, on appelle donc cette fonction en premier (le tableau devient donc blanc), et on colorie la case cliquée en jaune. Le javascript est très rapide à s'exécuter, tu ne distinguera pas de clignotement.
En espérant t'avoir aidé.

xem

17 juin 2010 à 10:20:37

Merci de t'être penché sur la question

J'ai pensé à cette solution en effet, mais mon vrai tableau peut en fait avoir plusieurs milliers de cases, et je pense qu'il aurait été préférable de ne rétablir que la case précédemment cliquée.

Au pire je ferai cela mais c'est pas propre.

Il y aurait une autre piste, ça serait une fonction onClickOutside()
Qui ferait que si on clique en dehors d'une case, ça la décolorie...
Mais j'ai pas réussi à l'appliquer.

Ce qui me chagrine en fait c'est pourquoi je peux lire mais pas modifier ma variable globale old_cell dans mon onClic inline.

Et peut-on y remédier?

Noname42

17 juin 2010 à 10:31:20

Tout simplement parce qu'une variable globale est globale à un script, non a toute la page. Il est normal que tu ne puisse pas y accéder.

xem

17 juin 2010 à 10:32:36

et si mon onClick appelle une fonction qui elle se trouve dans le même <script> que ma variable globale, celle-ci pourra la modifier?

Noname42

17 juin 2010 à 10:34:31

Dans ce cas oui

xem

17 juin 2010 à 10:43:33

okay, merci, je testerai ça.

Je suis quand même curieux...

Comment expliquez vois que mon onClick arrive a la LIRE cette variable, mais pas l'écrire?
un onClick = "alert(old_cell); old_cell = '1';" affichera 0 à chaque clic. Ca veut donc dire qu'on y a accès. mais quand on fait old_cell = 1, ça doit créer une variable locale. y'a pas moyen comme en PHP de dire que la variable qu'on veut modifier est globale?
(en PHP c'est $GLOBALS['nom_de_variable_sans_signe_dollar_devant'];)

- en tout cas ça marche, merci de m'avoir mis sur la voie de la visibilité de la variable globale!

restimel

17 juin 2010 à 12:48:39

Citation : Kylyox

Tout simplement parce qu'une variable globale est globale à un script, non a toute la page. Il est normal que tu ne puisse pas y accéder.

C'est quoi cette histoire? Une variable globale appartient à l'objet window donc n'importe quel script de la page peut y accéder. Il n'y a aucune restriction inter-script (c'est d'ailleurs pour cela qu'il y a parfois des conflits entre différents script qui utilisent les mêmes noms pour des variables globales).

Ces zones de "script" ne sont que des séparation (X)HTML. Mais il n'y a aucune séparation pour l'interpréteur javascript.

Le fait que tu ne peux pas changer old_cell est étrange et il doit y avoir un conflit quelque part (peut-être une variable est déjà nommée comme celle-ci et est déclarée en read-only ou alors une erreur de script). Pour trouver le problème, le mieux serait que tu nous montre ta page en entier ou que tu nous donne un lien où l'on peut tester cette page.
Sinon il faut vérifier s'il n'y a pas d'erreur javascript (du coup l'exécution est arrêté et donc le code qui suit n'est pas exécuté). Pour voir s'il y a des erreurs il suffit de regarder dans outils>console d'erreur (pour Firefox), pour IE il faut cliquer sur le triangle jaune qui aparait en bas à gauche (je ne sais plus quel est le raccourci pour ouvrir cette fenêtre)