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

**Micmaya** · 13/03/2013, 23h32

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 :

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
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.

**Kaamo** · 14/03/2013, 10h00

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 php :

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

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 html :

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

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

**Micmaya** · 14/03/2013, 12h55

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

Code php :

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
<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>

**SpaceFrog** · 14/03/2013, 13h55

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

**Micmaya** · 14/03/2013, 14h07

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 html :

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
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 php :

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

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 php :

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
<?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 !

**SpaceFrog** · 14/03/2013, 14h15

Ha oki...
autant faire :

Code php :

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

1
2
$d = "div0";
$d++;

**Micmaya** · 14/03/2013, 20h40

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

**SpaceFrog** · 14/03/2013, 22h22

juste pour le fun ..
teste

Code php :

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

1
2
3
4
$foo ="aa"
for($i=1;$i<10;$i++){
 echo $ff++;
}

**Micmaya** · 15/03/2013, 18h22

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 php :

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

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

Résultat:

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 php :

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

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

Résultat:

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é !

**SpaceFrog** · 16/03/2013, 09h28

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

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

JavaScript

Partager

Partager