Faire apparaitre/disparaitre lignes tableau -Comment Faire ?

**mathieu7497** · 29/03/2006, 19h11

Bonjour à tous,

Je souhaiterais réaliser un tableau (ou plusieurs?) qui regroupe des infos pas catégorie/sous-catégorie. J'aimerais que l'on puisse developper le tableau en question afin de faire apparraitre et disparaitre ses catégories et sous-catégories.

Autrement dit, j'aimerais faire ce qui a été réalisé sur ce site à cette page: http://www.developpez.net/forums/index.php?c=13

Comment faire, quel technologie utiliser ?

De plus les données affichées dans le tableau sont dynamique. Proviennent d'une base de données mysql et donc le nombre de rubrique-sous-rubrique peut changer...

Merci par avance à tous.
Mathieu.

**bibile** · 29/03/2006, 22h14

apparement, c'est fait en php. donc, un allez-retour sur le serveur a chaque clic !

si tu veux pas faire comme ca, tu peux lire ca:
http://www.developpez.net/forums/viewtopic.php?t=455798

c'est la solution en javascript

**Death83** · 30/03/2006, 00h12

Le mieu serait de le faire en AJAX.

Regarde sur cette page de mon site :
http://www.manganimes.org/critiques/accueilmanga.php

Tape a dans le moteur de recherche. Et apres click plusieurs fois sur les loupes

.

Dis moi si ca t'interesse je pourrais te filer des bouts de code par MP.

Sinon j'ai fait la meme chose en php (c'est ce que tu optient si tu click sur une des lettre dans l'abcdere). Mais c'est plus lourd et ca rafraichi la page entierement a chaque click.

**mathieu7497** · 30/03/2006, 19h59

Salut Death83,
C'est exactement cela que je souhaite faire.
Chaque fois que l'on clic sur la loupe cela ouvre ou ferme le tableau.
La version php m'irais très bien dans la mesure où je ne souhaite pas me mettre à l'ajax tout de suite...

Si tu pe me filer des bouts de codes ce serait super.
Mathieu.

**ilood** · 30/03/2006, 21h49

Bonjour

Il ne faut pas tout de suite sortir la grosse artillerie ajax.
Un peu de javascript pour gérer les styles.

Un exemple qui masque un bloc. Reste à gérer l'affichage, suffit de changer un peu la fonction. Vérification de l'état du bloc puis affecter un display bloc ou none en fonction de l'état.

Code :

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

1
2
3
4
5
<script type="text/javascript">
function masque&#40;id&#41;&#123;
	document.getElementById&#40;id&#41;.style.display = 'none';
&#125;
</script>

Code :

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

1
2
3
4
5
6
7
8
9
10
<ul>
	<li onclick="javascript&#58;masque&#40;'sous1'&#41;;">Partie 1
	<ul id="sous1">
		<li>Sous 1
		<li>Sous 2
	</ul>
	</li>
	<li>Partie 1</li>
	<li>Partie 2</li>
</ul>

**Death83** · 30/03/2006, 21h51

Oki ca marche. La version php n'est pas compliqué du tout.

Je t'expliquerai le principe par mp. Pas tout de suite car j'ai du boulot, mais je te fait ca bientôt.

**mathieu7497** · 30/03/2006, 22h34

Merci a vous deux death83 et ilood,

La question triviale de la journée pour death83: C'est quoi mp?

Merci @+
Math.

**Death83** · 31/03/2006, 11h16

Mp c'est message privé.

Mais je vais répondre ici en faite.

Oui de toute manière si tu utilise l'AJAX c'est le même principe que ce que ilood ta donné. L'avantage c'est que tu ne va chercher dans ta base de donné que les données a afficher. Imagines si tu as un tableaux avec 1000 lignes masqué, le gain devient vite interessant.

Sinon pour la solution php ce que je fait c'est que j'imbrique un tableau dans un autre tableau.

Dans le premier tableau je défini un id automatiquement (qui correspond à l'id dans ma base de donné comme ca je suis sur qu'il est unique).

Ensuite je met un lien sur la partie qui clickable qui permettera d'afficher le résultat. EN mettant dans l'url l'id de la ligne correpondante.

ENsuite lorsque la page se rafraichi j'affiche le tableaux secondaire pour l'id récupérer.

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
echo '
<table>
   <tr id="1">
         <td>
                 <a href="?id=1">Click</a>
         </td>
         
   </tr>
';
   if&#40;$_GET&#91;'id'&#93;=1&#41;
   &#123;
           echo '<tr><td><table>...</table></td></tr>';
   &#125;
   echo '
   <tr id="2">
        <td>
                 <a href="?id=1">Click</a>
        </td>
   </tr>
';
   if&#40;$_GET&#91;'id'&#93;=2&#41;
   &#123;
           echo '<tr><td><table>...</table></td></tr>';
   &#125;
   echo '
</table>
';

Je viens de faire ca vite fais sans tester mais en gros c'est le principe. Apres il faut adapter a ton tableau pour les tableaux imbriqué (colspan ...).

Et tu peut synthétiser tout ca en une seul boucle. Ca marche bien mais c'est beaucoup plus lourd qu'avec l'AJAX. L'avantage c'est que ca marche sans javascript. C'est cette methode que j'ai mise sur ma page pour les personnes qui refusent JS.