retrouver encienne couleur d'une ligne d'un tableau

22 déc. 2009, 13:20

Bonjour,

j'ai un tableau qui a chaque ligne attribue une couleur, il existe 2 couleur, voici une version simplifié :

$count = 0;	
($count % 2 == 1) ? $color = "table_color_1" : $color = "table_color_2";

echo '<tr class="'.$color.'">';

$count++;

maintenant je change la couleur de chaque ligne quand la souris passe dessus :

Code : Tout sélectionner

	<script language="javascript">
		function colore(obj) {
			obj.style.background = '#FF0000'
		}
		function decolore(obj) {
			obj.style.background = '#FFFFFF'
		}
	</script>


echo '<tr class="'.$color.'" onmouseover="colore(this)" onmouseout="decolore(this)">';

mais j'aimerai retrouver la même couleur présente avant le passage de la souris

l'idée est la suivante :

Code : Tout sélectionner

		function decolore(obj, oldColor) {
			obj.style.background = oldColor;
		}

               onmouseout="decolore(this,$color)"

mais cette façon fait qu'une fois la souris passé la couleur ne change plus!

une idée ?

22 déc. 2009, 17:06

Tu peux très simplement passer la valeur inherit...

Code : Tout sélectionner

   <script language="javascript">
      function colore(obj) {
         obj.style.background = '#FF0000'
      }
      function decolore(obj) {
         obj.style.background = 'inherit'
      }
   </script>

ça permet de dire au css de prendre la valeur spécifiée plus avant dans le code, en l'occurrence ici, la valeur définie dans ta classe table_color_2...

23 déc. 2009, 11:23

en effet, les lignes ne restent plus figé en rouge quand la souris s'en va,

mais il deviennent blanc alors que la couleur précédente était du gris claire ou foncé ...

23 déc. 2009, 11:35

Alors il va falloir stocker l'ancienne valeur quelque part

, je ferai comme ça:

Code : Tout sélectionner

   <script language="javascript">
var colorTmp=''; // variable déclaré en global
      function colore(obj) {
         colorTmp=obj.style.background;
         obj.style.background = '#FF0000';
      }
      function decolore(obj) {
         obj.style.background = colorTmp;
      }
   </script>

Mais ça veut dire qu'il faut que tu définisses ces couleurs, dans le code html, sinon obj.style.background ne retournera rien...
Sinon une solution plus propre, tu crées une classe table_color_hover, et tu faits en sorte qu'au survol, l'élément ai ceci dans ces classe:

Code : Tout sélectionner

<elmt class="table_color_x table_color_hover">

Ainsi la dernière classe écrase le reste, et ensuite, il suffit de l'enlever, à coup de split ou autre...
ça ferait qqch comme ça:

Code : Tout sélectionner

   <script language="javascript">
      function colore(obj) {
         obj.className += ' table_color_hover';
      }
      function decolore(obj) {
         tmp=obj.className;
         tmp=tmp.split(' ');
         obj.className=tmp[0];
      }
   </script>

Voilà

23 déc. 2009, 12:41

j'ai utilisé la 1ere méthode qui marche très bien

j'avoue que pour la 2eme je n'ai pas très bien compris, mais c'est pas grave

merci jojolapine !

=D>

retrouver encienne couleur d'une ligne d'un tableau

Qui est en ligne