Discussion :

[whitespirit]

bonjour,

J'ai un tableau contenant en première colonne un checkbox. Ce code html+js me permet d'avoir un hover lors du passage de la souris

Code :

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

<tr class = "tab_tr_normal" onMouseOut="this.style.backgroundColor=col_tmp;" onMouseOver="col_tmp=this.style.backgroundColor;this.style.backgroundColor='#ebebeb'">

Je ne connais pas du tout ce formidable language Javascript mais je souhaiterai intérer une petite routine : lorsque je clique sur le checkbox, la ligne <tr> est mis en une couleur que j'aurai spécifié. Lorsque je décoche ce checkbox, je reviens à la couleur d'origine.

Peut-être que vous avez une solution simple ? J'ai beaucoup de mal à trouver une réponse en tappant sur la tête de google, alors je me tourne vers ce formidable forum.

Merci

[SpaceFrog]

as tu declaré ta variable col_temp en globale ?

Mais bon pour plus de sureté et eviter que ton col_temp ne prenne la couleur d'une autre ligne sue le onmousover de l'autre ligne :

Code :

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

<tr class = "tab_tr_normal" onMouseOut="this.style.backgroundColor=this.col_tmp;" onMouseOver="this.col_tmp=this.style.backgroundColor;this.style.backgroundColor='#ebebeb'">

[whitespirit]

Oui oui, cette partie fonctionne maintenant. Mais je souhaiterai ajouter un évènement de type onclick et on.. heu.. ondeclick ? Enfin, lorsqu'on clique sur la ligne, je change la couleur et lorsque clique une seconde fois, je remet la couleur d'origine (qui est stocké en tant que define chez moi)

[le_chomeur]

tu créer une méthode vérifiant la couleur au moment du click
si bleu alors rouge, si rouge alors bleu

[SpaceFrog]

Code :

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

<tr class = "tab_tr_normal" onMouseOut="this.style.backgroundColor=this.col_tmp;" onMouseOver="this.col_tmp=this.style.backgroundColor;this.style.backgroundColor='#ebebeb'" onclick="this.style.backgroundColor=(this.style.backgroundColor!=this.define)?this.define:'red'" define="yellow">

mais il ne conserve pas la couleur puisque le onmouseout le fait changer ...

faut il conserver la couleur ?

[le_chomeur]

pour ce que j'en ai compris oui :

Enfin, lorsqu'on clique sur la ligne, je change la couleur et lorsque clique une seconde fois, je remet la couleur d'origine (qui est stocké en tant que define chez moi)

[SpaceFrog]

il ne parle pas de quitter le tr .. juste de click ...

mais bon suffit de mettre un flag

[le_chomeur]

lol on tourne en rond la

[SpaceFrog]

Code :

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

<tr class = "tab_tr_normal" onMouseOut="if(clicked){this.style.backgroundColor=this.col_tmp;}" onMouseOver="if(clicked){this.col_tmp=this.style.backgroundColor;this.style.backgroundColor='#ebebeb'}" onclick="this.style.backgroundColor=(this.style.backgroundColor!=this.define)?this.define:'red';clicked=(clicked)?0:1;" define="yellow" clicked="0" >

Quand il est clické, il ne change pas de couleur,
Dès qu'on le reclick le mousover reprend ses droits ...
après ça dépend du comportement que l'on veut ...

[whitespirit]

Hooo... Tous ces posts durant mon abscence !!!

Hey, je suis désolé, malgré tous ces posts, il ne se passe rien lorsque je clique sur une cellule. J'ai voulu faire le warrior et me servir des informations cités plus haut pour trouver la faille, mais non, rien à faire.

Voici le code généré après mon passage au php :

Code :

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

1
2
3
4
<tr bgcolor="#eff5ff" clicked="0" define="yellow" 
onclick="this.style.backgroundColor=(this.style.backgroundColor!=this.define)?this.define:'red';clicked=(clicked)?0:1;" 
onmouseover="if(clicked){this.style.background='#ebebeb'}" 
onmouseout="if(clicked){this.style.background='#EFF5FF'}">

IL y'a qq chose qui ne va pas ? A la base, l'évenement onMouseOver et onMouseOut (sans le if(clicked) fonctionne. j'ai bien une cellule sur 2 en surbrillance et un hover lors du passage de la souris.

Au cas ou, voici comment je fais pour afficher les lignes <tr>

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
	foreach($this->structureRowSet as $structureRow) 
	{ 
		$i++;
		//if ($i%2 == 0) $style = "tab_tr_hover"; else $style = "tab_tr_normal";
		if ($i%2 == 0) {
			$style = "bgcolor=\"".TABLEAU_BACKGROUND_COLOR_NORMAL."\"";
			$color = TABLEAU_BACKGROUND_COLOR_NORMAL;
		}
		 else {
		 	$style = "bgcolor =\"".TABLEAU_BACKGROUND_COLOR_DOUBLE."\"";
		 	$color = TABLEAU_BACKGROUND_COLOR_DOUBLE;
		 }
		 $hover = TABLEAU_BACKGROUND_COLOR_HOVER;
//======================================================================
//					LIGNE ET CELLULES DU TABLEAU
//======================================================================?>
	<tr <?php echo $style;?> class = "<?php //echo $style;?>" 
		onMouseOut="javascript:this.style.background='<?php echo $color;?>'" 
		onMouseOver="javascript:this.style.background='<?php echo $hover;?> '">

Avec ce code, je n'ai plus de hover et le click ne fonctionne pas

[SpaceFrog]

sans doute une erreur de recopie ..
testé chez moi ... ok

[whitespirit]

Ben non ! J'aurai aimé vous dire que ça y'est, mais il n'en est rien. J'ai recopié ton code via un magistral copier-coller et remplacer par le mien. Rien à faire. Je n'ai plus de hover au passage de la souris, et le clic de produit rien.

Voilà comment j'ai réécris votre code (mon premier code js):

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
 
		<tr  <?php echo $style;?> 
			define="yellow" 
			clicked="0" 
			onClick="this.style.backgroundColor=(this.style.backgroundColor!=this.define)?this.define:'red';clicked=(clicked)?0:1;" 
			onMouseOut="if(clicked)
			{
				this.style.backgroundColor=this.col_tmp;
			}
			else {
				this.style.background='<?php echo $color;?>'
			}" 
			onMouseOver="if(clicked)
			{
				this.col_tmp=this.style.backgroundColor;this.style.backgroundColor='#ebebeb'
			}
			else 
			{
				this.style.background='<?php echo $hover;?>'
			}">

Actuellement, le pb est que (je pense) la variable "clicked" n'est pas défini. Du moins c'est ce que me dis firebug lorsque je passe le curseur sur le tableau, plus exactement :

Code :

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

1
2
3
 
clicked is not defined
onmouseout(mouseout clientX=0, clientY=0)

Malgré mes essais, je n'ai pas réussi à trouver une solution.

[SpaceFrog]

je testais sur une seule ligne avec une variable globlale clicked ...

il suffit de confier le clicked au niveau de la ligne !!!

Code :

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

this.clicked=(this.clicked)?0:1;"

et

Code :

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

1
2
3
4
 
onMouseOut="if(this.clicked)
// suivi de 
onMouseOver="if(this.clicked)

[whitespirit]

Honte à moi et à ma famille !!!!! Ca fonctionne impec. Merci beaucoup, en plus j'ai pu comprendre grossomodo comment fonctionne le js.

Bon, là je rajoute 2 questions mais je suis déjà très très reconnaissant de votre aide pour arriver jusqu'à ce résultat qui répond à l'objet de mon post.

La première : comment puis-je conaitre les lignes cliquées pour traiter les informations dans une boucles PHP ? (oui, j'ai pas pensé quand j'ai mis ce post, que je devrais récupérer les informations par la suite).

La seconde : Mon premier élément de tableau est un checkbox, lorsqu'on clique ou déclique, comment sélectionner le checkbox ? J'ai essayé d'acceder à mon élément par nom, mais je bataille trop en js. L'élement dans chaque ligne est réprésenté de cette manière :

Code :

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

<td class="tab_case"><input type="checkbox" /></td>

J'ai ce même élément dans l'entête de mon tableau, qui est censé coché toutes les cases....

J'abuse ???

En tout cas, merci 1000 fois pour le code que vous m'avez montré. Merci beaucoup.

[SpaceFrog]

1)

Code :

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

1
2
3
var AllTrs=document.getElementsByTagName('tr');
var CheckedLines=new Array();
for(i=0;Alltrs[i];i++){if(AllTrs[i].checked=='1'){CheckedLines.push(AllTrs[i])}}

et là CheckedLines est une collection des lignes cochées ...

2) ben il n'a pas de name ton input ????

Code :

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

<input type="checkbox" name="??????"/>

[whitespirit]

Purée, j'en ai vraiment marre d'être un boulet sur ce post. J'ai pourtant bien compris le principe mais je n'arrive pas à l'appliquer. Voici mon code

Code :

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

1
2
3
4
5
6
7
<td class="tab_case"><input type="checkbox" 
									onClick="javascript:var AllTrs=document.getElementsByTagName(\'tr\');
											var CheckedLines = new Array();
											for(i=0;AllTrs[i];i++){
												if(AllTrs[i].checked==\'1\'){
													CheckedLines.push(AllTrs[i]);
												}}" /></td>';

Au début, j'étais fier d'avoir pu débugger une erreur d'écriture sur AllTrs qui était écris 'Alltrs'.

Mais rien à faire, ça ne marche pas. Lorsque je clique dans le checkbox, il y'a rien. Je n'ai pas d'erreurs javascript mais rien ni les autres <input type="checkbox" name ="id1"> de chaque ligne<tr> du tableau ne sont cochés et encore moins surlignés.

J'ai essayé de mettre simplement : AllTrs[i].checked=1 dans le for, mais apparement ce n'est pas une idée digne de ce nom.

Voilà je sollicite encore une fois votre aide.