Discussion :

[Ben-o]

Bonjour, je souhaite mettre en place, sur une page d'annonces immobilières un toggle permettant de masquer/afficher un formulaire attaché à chaque annonce.

J'ai un script php qui affiche les annonces à partir d'une base MySql.

Ca se présente comme ça:

Code :

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

1
2
3
4
5
6
7
8
<?php while ($donnees = mysql_fetch_array($resultat) ){
<table>
  <tr>
    <td>.......</td>
    <td>.......</td>
  </tr>
</table>
?>

La page contient 10 tables une fois chargée.

J'ai trouvé un petit script JS permettant de faire cela, mais il s'appuie sur "getElementById", le voici:

Code :

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

1
2
3
4
5
6
7
8
9
function toggle(obj) {
	var el = document.getElementById(obj);
	if ( el.style.display != 'none' ) {
		el.style.display = 'none';
	}
	else {
		el.style.display = '';
	}
}

Le soucis, c'est qu'ainsi, je ne peux pas agir sur chaque annonce(table) tant donné qu'elles sont générées dynamiquement.

On m'a conseillé d'utiliser "getElementsByClassName", mais je ne m'en sors pas.

J'espère avoir été clair

Merci par avance pour votre aide.

Vous pouvez voir la page ici

[d-Rek]

Code PHP :

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

1
2
3
4
5
6
7
8
9
<?php while ($donnees = mysql_fetch_array($resultat) ){?>
<table>
  <tr>
    <td>.......</td>
    <td>....... <a onclick="toggle('table<?php echo $donnees['id']; ?>');" style="cursor:pointer;">Nous contacter</a></td>
  </tr>
</table>
<div id="table<?php echo $donnees['id']; ?>"><!-- ICI TON FORM --></div>
<?php }?>

$donnees['id'] te retourne l'identifiant de ton annonce mais faut mettre d'abord toutes tes div avec le motif 'table' à display:none;

Bon courage

[Ben-o]

Merci beaucoup d-Rek! je teste ça de suite.

[Ben-o]

Qu'entends-tu par "mettre d'abord toutes tes div avec le motif 'table' à display:none;"? Comment puis-je faire cela?

Et du coup, je peux enlever ceci?:

Code :

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

1
2
3
4
5
6
7
8
9
function switchMenu(obj) {
			var el = document.getElementById(obj);
				if ( el.style.display != "none" ) {
					el.style.display = "none";
				}
				else {
					el.style.display = "";
				}
		}

[Ben-o]

En fait, c'est un <tr> que je souhaite masquer/afficher, voici le code complet:

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
<?php
while ($donnees = mysql_fetch_array($resultat) )
{
<table width="620" align="center" cellpadding="0" cellspacing="0">
	<tr>
		<td width="220" height="150" align="center">
		</td>
 
		<td width="360" height="150">
                </td>
 
	        <td width="40" height="150">
		<a onclick="toggle('table<?php echo $donnees['no_asp']; ?>');" style="cursor: pointer;" title="Plus d'infos sur ce bien"><img src="images/plus_infos.png" title="Plus d'infos sur ce bien" alt="Plus d'infos sur ce bien" style="border: none; width: 28;" /></a>
		</td>
 
	</tr>
 
	<tr id="table<?php echo $donnees['no_asp']; ?>" style="display: none;">
 
		<td width="620" height="80" align="left" colspan="3">
			<form>
			</form>
		<td>
 
	</tr>
 
	<tr>
 
		<td width="620" height="30" align="left" colspan="3">
		</td>
 
	</tr>
 
</table>

Merci pour ta patience

[d-Rek]

Non, techniquement je crois pas que c'est possible mais de toute façon, c'est pas du tout conseillé.
L'élément table doit théoriquement être utilisé pour afficher des données hiérarchisées en tableur (pense à Excel).

Tu devrais te mettre aux div, au début c'est pas facile (voire ça fait un peu mal) mais c'est comme toute les premières fois

[Ben-o]

C'est bon, j'ai trouvé la solution, j'ai gardé la fonction:

Code :

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

1
2
3
4
5
6
7
8
9
function switchMenu(obj) {
var el = document.getElementById(obj);
	if ( el.style.display != "none" ) {
		el.style.display = "none";
	}
	else {
		el.style.display = "";
	}
}

ensuite, le bouton qui appelle la fonction:

Code :

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

<a onclick="switchMenu('<?php echo $donnees['no_asp']; ?>');" style="cursor: pointer;">

"no_asp" étant l'identifiant de chaque annonce

et pour finir, le <tr> qui doit s'afficher/masquer est identifié par le même numéro (no_asp):

Code :

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

<tr id="<?php echo $donnees['no_asp']; ?>" style="display: none;">

Et ça fonctionne.

Merci encore pour ton aide.