Jump to content
Sign in to follow this  
Mozak

[table] insertion balise "div"

Recommended Posts

Bonjour à tous

[Explication]

Je souhaite faire un listing d'un résultat (le résultat peut en résulter jusque 300 lignes) et j'ai donc commencer en créant un tableau (aperçu ci-dessous), et je voudrais qu'à chaque résultat (celle comportant la class ".result") je puisse cliquer dessus pour avoir les détails du résultat souhaité (ceci est juste une mise en situation pour que vous compreniez bien ce que je souhaite faire) et donc un block caché sort en descendant pour afficher les détails et c'est la que ça me chagrine car je souhaite faire ceci (voir aperçu sous premier aperçu)

<table>
<thead>
<tr>
<th></th>
<th>Texte 1</th>
<th>Texte 2</th>
<th>Texte 3</th>
<th>Texte 4</th>
<th>Texte 5</th>
</tr>
</thead>
<tbody>
<tr class="result">
<td></th>
<td>Result 1</td>
<td>Result 2</td>
<td>Result 3</td>
<td>Result 4</td>
<td>Result 5</td>
</tr>
</tbody>
</table>

aperulisting.jpg

[Objectif]

Vous pouvez voir sur l'aperçu (sur la ligne en "hover" en dégradé vert) ce que je souhaite faire et donc je ne sais pas si je dois obligatoirement utiliser les balises de tableaux ou bien je peux faire cela avec d'autres balise (ce qui serai plus simple pour moi :whistling: ) comme "<div>" "<p>" etc...

[Aide]

- Je souhaite avoir des réponses sur la faisabilité (balise tableau ou autres), si je peux utiliser d'autres balise mon sujet serai résolu :)

- Si je suis obligatoirement d'utiliser les balises de tableaux je souhaiterais que vous m'aidiez dans cette démarche ( j'utilise rarement les tableaux, je ne suis pas un expert :blush: )

- Ou si une autre méthode peut être appliquée, me l'expliquer*

[info]

Je souhaite être aux normes W3C

Merci d'avance

Edited by Mozak
  • Upvote 1

Share this post


Link to post
Share on other sites

Salut Cedric ! ;)

Voila ce que je ferais :

<table>
<thead>
<tr>
<th></th>
<th>Texte 1</th>
<th>Texte 2</th>
<th>Texte 3</th>
<th>Texte 4</th>
<th>Texte 5</th>
</tr>
</thead>
<tbody>
<tr class="result" onclick="afficheTD('idresult1')">
<td></td>
<td>Result 1</td>
<td>Result 2</td>
<td>Result 3</td>
<td>Result 4</td>
<td>Result 5</td>
</tr>
<tr>
<td colspan="6" id="result1">ton texte caché ici</td>
</tr>
</tbody>
</table>

Il suffit donc d'appliquer un display:none au td avec l'id result1 puis avec jquery (par exemple) de le faire "slideDown" ou fadeIn suite a un onclick par exemple.

Ca te met sur la piste ?

b0b0

Share this post


Link to post
Share on other sites

Bonjour Mozak et bienvenue sur le Hub,

Sympathique manière d'exposer ton problème, c'est clair et rapide à comprendre au moins... :)

Je suis d'accord avec b0b0 sur une partie de sa réponse : utiliser Jquery. C'est simple et efficace. Cependant, avec Jquery, il vaut mieux complètement séparer le javascript du html, donc ne pas utiliser le "onclick" directement sur la cellule... Il "suffit" de faire un $('.result') pour sélectionner les cellules concernées en Jquery, et de leur rajouter un id="celluleXX" avec XX le numéro de la cellule en question, pour savoir de qui on parle.

De plus, c'est avec jquery qu'il faudrait rajouter un display:none à toutes les cases. Comme ça, ceux qui n'ont pas de javascript pourront voir tout le contenu sans cliquer.

Je te laisse découvrir ce sujet où j'avais un problème un peu similaire : Ajax avec paramètres.

  • Upvote 1

Share this post


Link to post
Share on other sites

En effet Sarc a raison !

Je ne voulais pas embrouiller Mozak en lui parlant de 25 choses à la fois d'où le condensé et l'inclusion de js dans le code html ;)

b0b0

Share this post


Link to post
Share on other sites

Sachant que tu peux très bien mettre les balises que tu souhaites dans un td.

Sinon, si tu souhaites utiliser jquery, et tant qu'à respecter les standards, il vaudrait mieux être plus accessible : afficher par défaut toutes les lignes "à masquer", les masquer en JavaScript au chargement de la page, et ne pas mettre d'évènement "onclick" sur les boutons d'affichage (quitte à créer ces derniers en JavaScript également).

Edit : il semble que je me sois fait prendre de vitesse ;) Mais les conseils de Sarc sont très bons également ;)

  • Upvote 1

Share this post


Link to post
Share on other sites

Sachant que tu peux très bien mettre les balises que tu souhaites dans un td.

[...]

Edit : il semble que je me sois fait prendre de vitesse ;) Mais les conseils de Sarc sont très bons également ;)

Merci de cette réponse, c'est vraiment ce que je voulais savoir :)

En ce qui concerne le javascript tout est déjà coder ainsi qu'au niveau php (je n'ai plus qu'à reporter mes variables), j'avais juste à faire ce fameux block lors du "hover" de chaque résultat et j'ai procédé d'une manière qui ressemble fortement à celle que Captain-torche à donné.

@Sarc -> J'ai jamais un même langage dans un même fichier (ça me paraît plus propre, et si une autre personne travail sur les fichiers et qu'elle maîtrise qu'un seul langage ca permet qu'elle modifie que son langage sans toucher aux autres), et si j'ai besoin je les incluent ;)

Merci de vos Réponses

Edited by olitax

Share this post


Link to post
Share on other sites

Proposition :

Tu proposes un second niveau d'informations. Traite la comme telle.

Déploiement :

Par défaut (sans JavaScript), construit ton tableau HTML sans cette information. Il faudra toutefois ajouter une colonne supplémentaire permettant d'y accéder par le biais d'un simple lien du type "Plus d'informations" (même si l'intitulé n'est pas très accessible).

<table>
<thead>
<tr>
<th></th>
<th>Texte 1</th>
<th>Texte 2</th>
<th>Texte 3</th>
<th>Texte 4</th>
<th>Texte 5</th>
<th>Plus d'informations</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>Result 1</td>
<td>Result 2</td>
<td>Result 3</td>
<td>Result 4</td>
<td>Result 5</td>
<td><a href="#">Plus d'informations</a></td>
</tr>
</tbody>
</table>

Vient ensuite améliorer l'expérience utilisateur en optimisant l'interface via JavaScript (avec ou sans JQuery à toi de voir) avec un appel externe (AJAX) du contenu "Plus d'informations" disponible sur des pages HTML externes et ainsi afficher ta <div>.

Edited by yep

Share this post


Link to post
Share on other sites

Yep, je ne suis pas d'accord avec ta méthode. Selon moi, une technologie facultative (telle que JavaScript) ne doit pas empêcher d'accéder à l'information si elle est absente.

Comme il n'y a apparemment pas de moyen d'accéder à l'information "secondaire", il faut absolument que cette information soit présente dans le code source.

Ca sera ensuite le rôle de JavaScript de masquer cette information, et de rajouter les liens de visualisation, qui permettront de la réafficher sélectivement.

Share this post


Link to post
Share on other sites

Comme il n'y a apparemment pas de moyen d'accéder à l'information "secondaire", il faut absolument que cette information soit présente dans le code source.

Ahem ? Et le lien "plus d'information" en HTML, je l'ai proposé pour quelle raison ? :P

Je parle bien de fournir cette information à un second niveau de lecture :

- par défaut, en HTML, sur une autre page

- si JS, l'information serait rapatriée dans la page.

L'information est accessible avec ou sans JS, c'est seulement l'expérience utilisateur qui est légèrement modifiée malgré un accès à cette information dans un second niveau de lecture.

Edited by yep

Share this post


Link to post
Share on other sites

Ca n'était pas flagrant dans ton exemple : dans un des cas, tu ne mettais pas de lien, et dans l'autre, tu en mettais un avec une ancre '#' ;)

Share this post


Link to post
Share on other sites

Ca n'était pas flagrant dans ton exemple : dans un des cas, tu ne mettais pas de lien, et dans l'autre, tu en mettais un avec une ancre '#' ;)

Effectivement, parce que le premier cas est une ligne d'entête (<thead> et <th>) et non du contenu placé dans le <tbody>.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×
×
  • Create New...