Gérer le surlignage <tr> et le onClick

**whitespirit** · 18/06/2008, 15h15

Bonjour

[MODIF]
Afin de ne pas alourdir ce post, j'ai supprimé le code écris ici suite au commentaire de Tuss. Mon problème est expliqué deux post plus loin.

Je fais donc référence à l'exemple de la FAQ
[/MODIF]

A bientôt.

**tusssss** · 18/06/2008, 15h32

LE this ne représente pas tous les objets compris dans ton tr, mais le tr en lui même.

De plus dans un onclick, remettre un this.clicked, c'est un peu étrange.

Enfin, dans un onmouseout faire un this.clicked, ca devient presque invraisemblable non?

Quand la souris n'est pas dessus et qu'on clique dessus ?
Comment on fait?

En retravaillant ça déjà ça devrait améliorer ton code.

Pas besoin de t'excuser, nous sommes tous passés par la.

**whitespirit** · 19/06/2008, 06h39

Merci de tes commentaires Tuss, j'ai le code dont tu fais référence de côté et j'essaie autrement.

**whitespirit** · 19/06/2008, 10h07

J'ai cet exemple de la FAQ permettant de mettre un hover dans une ligne <TR> d'une table:

Code :

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

1
2
3
4
5
6
7
<table border="0">
    <tr onmouseover="this.style.backgroundColor='red'"
		onmouseout="this.style.backgroundColor='white'">
        <td>coucou</td>
        <td>re coucou</td>
    </tr>
</table>

Par rapport à cet exemple de départ j'ai trois choses supplémentaires à gérer :

1. La couleur d'origine (je colorie une ligne sur deux, donc deux couleurs)
2. Lors d'un clic je change la couleur d'origine
3. Si je clic sur une ligne, je sélectionne une checkbox, et vice et versa, si je clic sur la checkbox je sélectionne la ligne. Mais, j'ai réussi à gérer ce 3.

Pour l'instant mon problème vient du fait que je dois sauvegarder qq part la couleur de fond avant le hover. Je souhaiterai donc utiliser une variable globale mais apparement je n'utilise pas la bonne technique

voici mon nouveau 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
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<SCRIPT LANGUAGE="javascript">
//-- Variable globale pour stocker la couleur de fond lors du onMouseOver
var color_hold				= '#FFFFFF';
 
/**
 * Change le fond d'une ligne <tr>
 * @param tr objet <tr>
 * @param color couleur de fond à affecter au <tr>
 * @param old_color si existe, on sauvegarde l'ancienne couleur de fond (onMouseOver) qu'on utilisera après onMouseOut
 */ 
function paint_row(tr, color, old_color)
{
        //-- Si l'ancienne couleur existe, je la stock et modifie la couleur du <tr>
	if (old_color != '')
	{
		tr.style.backgroundColor= color;
		color_hold = old_color; //--apparement color_hold est définie localement
	}
	else //-- Remplace la couleur du <tr> par la couleur stocké précédement
	{
		tr.style.backgroundColor= color_hold; 
	}
}
 
 </SCRIPT>
<HTML>
...
			<tr  <?php echo $style;?> 
				onClick=" paint_row(this,'<?php echo $select;?>',this.style.backgroundColor );
 one_checked('chk_<?php echo $i;?>');" 
 
				onMouseOut="paint_row(this,'<?php echo $color;?>', '');" 
				onMouseOver="paint_row(this,'<?php echo $hover;?>', this.style.backgroundColor);">

Le problème est que cette ligne color_hold = old_color; dans le code javascript n'affecte pas à ma variable (que je considère comme globale) color_hold.

Question : comment faire pour modifier une variable javascript défini en dehors d'une fonction ?

Encore désolé d'être si débutant !

**tusssss** · 19/06/2008, 10h26

Première remarque n'ayant rien à voir avec ton problème, est-ce vraiment indispensable pour toi de gérer tes couleurs avec du PHP? C'est pour te compliquer la tache ou alors tu laisse le choix à l'utilisateur des couleurs?

Pour ce qui est du color_hold, pourquoi veux tu la conserver, l'utilisateur peut faire varier autant de couleur qu'il désire, ou c'est uniquement parce que tu as 2 couleurs alternées dans ta table?

Si c'est parce que tu as 2 couleurs alternées et qui sont toujours les mêmes, tu peux tout simplement faire un test sur le numéro de ligne et cela te donnera la couleur à appliquer.

C'est une solution de rechange.

**whitespirit** · 19/06/2008, 19h19

Je gère les couleurs avec php car... Lorsque j'ai codé ce tableau je ne connaissais pas encore je Javascript. Puis, je créé le tableau dynamiquement dans une boucle foreach. Aussi comme tu l'as dit j'altère la couleur du background de chaque ligne et ces couleurs sont définies dans des defines.

Je garde la couleur color_old car je n'ai pas deux mais trois possibilités de couleur de fond :
- une couleur de fond par défaut
- une couleur de hover
- une couleur lors d'un clic

tu peux tout simplement faire un test sur le numéro de ligne et cela te donnera la couleur à appliquer.

Voilà pourquoi je ne peux pas faire de test sur le numéro de ligne car si cette ligne est cliqué, j'ai donc une nouvelle couleur qui n'a pas été défini. Le seul moyen que j'ai trouvé est donc de conserver la couleur existante dans color_old lors du onMouseHover

Perso je ne vois pas comment faire autrement... D'ou ma question comment faire pour accèder à la variable globale color_hold ?

Merci d'avance

Gérer le surlignage <tr> et le onClick

JavaScript

Discussions similaires

Partager

Partager