[table] insertion balise "div"

[Mozak]

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>

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

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

[info]

Je souhaite être aux normes W3C

Merci d'avance

Modifié 4 Novembre 2009 par Mozak

[b0b0]

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

[Sarc]

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.

[b0b0]

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

[captain_torche]

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

[Mozak]

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é 4 Novembre 2009 par olitax

[yep]

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é 6 Novembre 2009 par yep

[captain_torche]

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.

[yep]

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 ?

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é 10 Janvier 2010 par yep

[captain_torche]

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

[yep]

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