Afficher un "div" avec un "OnMouseOver" dans un "table->tr"

Version imprimable

Bonjour,

Je ne sais pas si le titre est assez explicite, alors permettez-moi cette petite introduction, encore une chose, je ne sais pas si je suis sur le bon forum car mon problème concerne deux langages : PHP & JavaScript.

J'ai une page web qui affiche un tableau (table) d'éléments en PHP (une simple boucle while de cinq item) et lorsque je survole une ligne du tableau (tr) j'aimerais qu'une div s'affiche dans la 2e colonne de cette ligne et disparaisse une fois passé sur une autre.

Bref, je vous mets le code ci-dessous, vous comprendrez peut-être mieux :

Code:

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
34
35
36
37
38
39
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Untitled Document</title>
	<style>
		table { border: 1px solid #999; width: 400px; border-collapse: collapse; }
		table tr:hover { background: #ddd; }
		table td { border: 1px solid #999; }
	</style>
	<script>
	function displayTitelHover(st) {
		document.getElementById(st).style.display = 'block';
	}
	function removeTitelHover(st) {
		document.getElementById(st).style.display = 'none' 
	}
	</script>
	</head>
	<body>
		<table>
			<?php
                        $i = 0;
                        while ($i < 5)
                        {
                                $d = "div".$i;
                                echo "<tr onmouseover='displayTitelHover(".$d.")' onmouseout='removeTitelHover(".$d.")'>
                                                                <td>LOGO</td>
                                                                <td>
                                                                        <div id=".$d." style='display:none;'>
                                                                                <input type='button' value='modif' />
                                                                        </div>
                                                                </td>
                                                        </tr>";
                                $i++;
                        }
                        ?>
		</table>
	</body>
</html>

Voila le problème, c'est que le code ne fonctionne pas, hors dans le code source, je vois bien l'id de la div qui est bon et bien incrémenté mais je ne sais pas si le JavaScript arrive à bien récupérer cet id.

Merci d'avance.

Le raisonnement est bon et c'est bien un problème de Javascript. Enfin, dû à une mauvaise construction via PHP.
A l'avenir, essaie de fournir le code HTML généré (affichage de la source du navigateur) plutôt que le PHP.

L'erreur se situe au niveau de la construction du tr :
Code:

1 2 3 4 5 6 7 8 echo "<tr onmouseover='displayTitelHover(".$d.")' onmouseout='removeTitelHover(".$d.")'> <td>LOGO</td> <td> <div id=".$d." style='display:none;'> <input type='button' value='modif' /> </div> </td> </tr>";
En effet, le code HTML généré doit ressembler à : (où XX est la chaine de caractère représentant l'id du div)
Code:

1 2 3 4 5 6 7 8 <tr onmouseover='displayTitelHover(XX)' onmouseout='removeTitelHover(XX)'> <td>LOGO</td> <td> <div id=XX style='display:none;'> <input type='button' value='modif' /> </div> </td> </tr>
Tu vois l'erreur maintenant ? XX n'est pas une chaine de caractère mais est considéré comme une variable JS. Du coup, ta fonction va essayer de trouver la valeur de cette variable ... qui est undefined pour le coup.

je te laisse corriger ton php

Merci, après une correction c'est fait et ça fonctionne, voici la correction:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<table>
<?php
$i = 0;
while ($i < 5)
{
	$d = "div".$i;
?>
	<tr onmouseover='displayTitelHover("<?php echo $d; ?>")' onmouseout='removeTitelHover("<?php echo $d; ?>")'>
		<td>LOGO</td>
		<td>
			<div id="<?php echo $d; ?>" style='display:none;'>
				<input type='button' value='modif' />
			</div>
		</td>
	</tr>
<?php
$i++;
}
?>
</table>

14/03/2013, 13h55
SpaceFrog

tu va avoir des id identiques sur la page ....

Non, il ne sont pas identiques puisque dans le code PHP s'incrémente la variable $d par $i++.

Voici le code html pour confirmation:

Code:

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
34
35
36
37
38
39
40
41
42
<table>
<tr onmouseover='displayTitelHover("div0")' onmouseout='removeTitelHover("div0")'>
	<td>LOGO 0</td>
	<td>
		<div id="div0" style='display:none;'>
			<input type="button" value="modif0" id="id0" name="action" onclick="Gest(this.id, this.value)" />
		</div>
	</td>
</tr>
<tr onmouseover='displayTitelHover("div1")' onmouseout='removeTitelHover("div1")'>
	<td>LOGO 1</td>
	<td>
		<div id="div1" style='display:none;'>
			<input type="button" value="modif1" id="id1" name="action" onclick="Gest(this.id, this.value)" />
		</div>
	</td>
</tr>
<tr onmouseover='displayTitelHover("div2")' onmouseout='removeTitelHover("div2")'>
	<td>LOGO 2</td>
	<td>
		<div id="div2" style='display:none;'>
			<input type="button" value="modif2" id="id2" name="action" onclick="Gest(this.id, this.value)" />
		</div>
	</td>
</tr>
<tr onmouseover='displayTitelHover("div3")' onmouseout='removeTitelHover("div3")'>
	<td>LOGO 3</td>
	<td>
		<div id="div3" style='display:none;'>
			<input type="button" value="modif3" id="id3" name="action" onclick="Gest(this.id, this.value)" />
		</div>
	</td>
</tr>
<tr onmouseover='displayTitelHover("div4")' onmouseout='removeTitelHover("div4")'>
	<td>LOGO 4</td>
	<td>
		<div id="div4" style='display:none;'>
			<input type="button" value="modif4" id="id4" name="action" onclick="Gest(this.id, this.value)" />
		</div>
	</td>
</tr>
</table>

et le code PHP ou je définis:

Code:

1
2
$i = 0;                                //Résultat 0
$d = "div".$i;                       //Résultat div0

et à la fin, j'incrémente $i++ //Résultat div0 -> div1 -> div2 -> ... voir le code ci-dessus pour confirmer

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<?php
$i = 0;
while ($i < 5)
{
	$d = "div".$i;
?>
	<tr onmouseover='displayTitelHover("<?php echo $d; ?>")' onmouseout='removeTitelHover("<?php echo $d; ?>")'>
		<td>LOGO <?php echo $i; ?></td>
		<td width="67" height="42" ALIGN="right" valign="middle" id="<?php echo $d.'d'; ?>" style="border-top: solid 1px #fff; border-right: solid 1px #fff; border-bottom: solid 1px #fff;">
			<div id="<?php echo $d; ?>" style='display:none;'>
				<form name="test" method="POST" action="#">
					<input type="button" value="modif<?php echo $i; ?>" id="<?php echo 'id'.$i; ?>" name="action" onclick="Gest(this.id, this.value)" />
				</form>
			</div>
		</td>
	</tr>
<?php
$i++;
}
?>

Merci à toi de ton aide !

14/03/2013, 14h15
SpaceFrog
Ha oki...
autant faire :
Code:

1 2 $d = "div0"; $d++;
14/03/2013, 20h40
Micmaya

Je ne savais pas que ce code pouvait fonctionner, comme c'était une variable plutôt de type string même s'il n'y a pas de type en PHP. Je ne pensais pas que l'on pouvait incrémenter une variable contenant du texte dedans.

Mais après avoir fait plusieurs tests ce code ne peut fonctionner si tu mets le zéro au début ou au milieu, ça ne fonctionne que si il y a une valeur numérique à la fin de la variable, cela doit être une fonction native à PHP.

Merci en tout cas pour l'info et pour la petite optimisation, c'est le genre de chose que l'on ne voit pas dans les livres.

Merci ;)
14/03/2013, 22h22
SpaceFrog
juste pour le fun ..
teste
Code:

1 2 3 4 $foo ="aa" for($i=1;$i<10;$i++){ echo $ff++; }
15/03/2013, 18h22
Micmaya
J'ai testé et après une petite correction (oublit d'un point virgule et j'ai changé la variable car dans la boucle for ce n'était plus la même) et voici le résultat:
Code:

1 2 3 4 5 6 <?php $foo ="aa"; for($i=1;$i<10;$i++){ echo $foo++."<br>"; } ?>
Résultat:

Citation:

aa
ab
ac
ad
ae
af
ag
ah
ai

Et ce que tu as mis (en ne renommant pas la variable dans la boucle for):
Code:

1 2 3 4 5 6 <?php $foo ="aa"; for($i=1;$i<10;$i++){ echo $ff++."<br>"; } ?>
Résultat:

Citation:

1
2
3
4
5
6
7
8

Le premier résultat est assez surprenant, il a incrémenter par ordre alphabétique le dernier caractère de la variable. Et dans ton exemple, comme il ne connait pas $ff (et pas $foo), je suppose qu'il l'initialise dans la boucle et l'incrémente ==> normal.

C'est sympa de voir des résultats comme ceci fonctionné ! :P
16/03/2013, 09h28
SpaceFrog

oui désolé c'était bien $foo qu'il fallait incrémenter :oops: