Aller au contenu

[table] insertion balise "div"


Mozak

Sujets conseillés

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

Lien vers le commentaire
Partager sur d’autres 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

Lien vers le commentaire
Partager sur d’autres 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

Modifié par olitax
Lien vers le commentaire
Partager sur d’autres 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>.

Modifié par yep
Lien vers le commentaire
Partager sur d’autres 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.

Lien vers le commentaire
Partager sur d’autres sites

  • 2 months later...

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.

Modifié par yep
Lien vers le commentaire
Partager sur d’autres 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>.

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...