IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Cacher une partie d'un tableau (colonnes) proprement ?


Sujet :

JavaScript

  1. #1
    Nouveau membre du Club
    Inscrit en
    Septembre 2004
    Messages
    44
    Détails du profil
    Informations forums :
    Inscription : Septembre 2004
    Messages : 44
    Points : 31
    Points
    31
    Par défaut Cacher une partie d'un tableau (colonnes) proprement ?
    Salut à tous,

    J'ai un problème simple que je n'arrive pas à régler. C'est probablement plus du HTML que du javascript.

    J'ai crée le tableau suivant :


    Avec le code suivant :
    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
     <table border="1" bordercolor="#3c3c3c" cellspacing="0" cellpadding="5">                
                    <tr bgcolor="#96ca2d">
                        <th><font color="#ffffff" type="bold">Nom</font></th>
                        <th><font color="#ffffff">Prénom</font></th>
                        <th><font color="#ffffff">E-mail</font></th>
                        <th><font color="#ffffff">Code Op</font></th>
                        <th><font color="#ffffff">Photo</font></th>
                        <th id="titreLv2" style="display:none"><font color="#ffffff">LV2</font></th>
                        <th id="titreOrdi" style="display:none"><font color="#ffffff">Ordinateur</font></th>
                        <th id="titreConnex" style="display:none"><font color="#ffffff">Internet</font></th>
                    </tr>          
                    <xsl:for-each select="contact/etudiant">
                        <tr>
                            <td onclick="affiche(this.value)"><b><xsl:value-of select="nom"/></b></td>
                            <td><xsl:value-of select="prenom"/> </td>
                            <td><xsl:value-of select="mail"/> </td>
                            <td><xsl:value-of select="code_op"/> </td>
                            <td><img><xsl:attribute name="src"><xsl:value-of select="photo" /></xsl:attribute></img> </td>                       
                            <td id="contenuLv2" style="display:none"><xsl:value-of select="lv2"/></td>
                            <td id="contenuOrdi" style="display:none"><xsl:value-of select="ordi"/></td>
                            <td id="contenuConnex" style="display:none"><xsl:value-of select="connexion"/></td>
                        </tr>
                    </xsl:for-each>		
                    </table>

    Avec mon lien au dessus du tableau, j'affiche d'autres colonnes qui sont en "style=display:none" par défaut.

    Lorsque je les affiche, la structure du tableau n'est pas respectée :



    Problèmes :
    - la dernière colonne de titre contient 3 lignes qui sont censées être mes 3 colonnes titres cachées...
    - les données correspondantes (les 3 lignes à fond blancs apparues) ne marche que pour la première entrée. Alors qu'elle proviennent d'un xsl:for-each qui fonctionne pour les colonnes précédentes.


    J'ai testé de passer les champs à afficher/cacher en "visiblity=hidden" ça a l'air de régler le problème mais le tableau laisser un espace vide là où sont cachés les colonnes, c'est donc très moche.

    Quelqu'un a une idée pour arranger ça ?

    Merci


    J'ajoute mon code Javascript au cas où mais je pense que le problème ne vient pas de là
    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
     
    function toggle(monId) {
    					var monElement = document.getElementById(monId);
    					if(monElement.style.display == 'none') 
    					  monElement.style.display = 'block';
    					  else 
    					  monElement.style.display = 'none';
    					}
    					function toggleOn(monId) {
    							var monElement = document.getElementById(monId);
    							monElement.style.display = 'block';
    					}
    					function toggleOff(monId) {
    						var monElement = document.getElementById(monId);
    						monElement.style.display = 'none';
    					}
    					function afficheInfos(){
    						toggle("titreLv2");
    						toggle("titreOrdi");
    						toggle("titreConnex");
    						toggle("contenuLv2");
    						toggle("contenuOrdi");
    						toggle("contenuConnex");
    					}

  2. #2
    Expert éminent sénior

    Homme Profil pro
    Inscrit en
    Janvier 2007
    Messages
    13 474
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Secteur : Finance

    Informations forums :
    Inscription : Janvier 2007
    Messages : 13 474
    Points : 36 571
    Points
    36 571
    Par défaut
    Bonjour,
    tu devrais pouvoir utiliser
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    <colgroup>
            <col id="col1">
            <col id="col2">
            <col id="col3">
    </colgroup>
    Ainsi, en modifiant le display d'un <col> tu interviendras sur l'ensemble de la colonne du tableau.
    Attention par contre si tu as des colspan ...

    A+

  3. #3
    Nouveau membre du Club
    Inscrit en
    Septembre 2004
    Messages
    44
    Détails du profil
    Informations forums :
    Inscription : Septembre 2004
    Messages : 44
    Points : 31
    Points
    31
    Par défaut
    Merci pour la réponse. Par contre je n'arrive à faire marcher ces balises, voilà ce que j'ai fait :

    Code html : 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
    <table border="1" bordercolor="#3c3c3c" cellspacing="0" cellpadding="5">                
                <colgroup>
                    <col id="infoDeBase" span="5">	
                    <col id="lv2" style="display:none">
                    <col id="ordi" style="display:none">
                    <col id="connexion" style="display:none">
                </colgroup>
    	                <tr bgcolor="#96ca2d">
                        <th><font color="#ffffff" type="bold">Nom</font></th>
                        <th><font color="#ffffff">Prénom</font></th>
                        <th><font color="#ffffff">E-mail</font></th>
                        <th><font color="#ffffff">Code Op</font></th>
                        <th><font color="#ffffff">Photo</font></th>
                        <th><font color="#ffffff">LV2</font></th>
                        <th><font color="#ffffff">Ordinateur</font></th>
                        <th><font color="#ffffff">Internet</font></th>
                    </tr>          
                    <xsl:for-each select="contact/etudiant">
                        <tr>
                            <td onclick="affiche(this.value)"><b><xsl:value-of select="nom"/></b></td>
                            <td><xsl:value-of select="prenom"/> </td>
                            <td><xsl:value-of select="mail"/> </td>
                            <td><xsl:value-of select="code_op"/> </td>
                            <td><img><xsl:attribute name="src"><xsl:value-of select="photo" /></xsl:attribute></img> </td>                       
                            <td><xsl:value-of select="lv2"/></td>
                            <td><xsl:value-of select="ordi"/></td>
                            <td><xsl:value-of select="connexion"/></td>
                        </tr>
                    </xsl:for-each>		
                    </table>

    Il me fait une erreur sur la fermeture de colgroup
    Si je ferme mes <col/>, la page fonctionne mais toutes les colonnes sont affichées.

    Je ne sais pas pourquoi çe ne marche si je laisse mes col ouvertes.

    Des idées ?

  4. #4
    Nouveau membre du Club
    Inscrit en
    Septembre 2004
    Messages
    44
    Détails du profil
    Informations forums :
    Inscription : Septembre 2004
    Messages : 44
    Points : 31
    Points
    31
    Par défaut
    J'ai trouvé.

    Il faut en effet fermer les "col".

    Par contre, "display:none" ne fonctionne pas sur ces balises.

    Il faut utiliser "visibility:collapse".

    Voilà !

  5. #5
    Expert éminent sénior

    Homme Profil pro
    Inscrit en
    Janvier 2007
    Messages
    13 474
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Secteur : Finance

    Informations forums :
    Inscription : Janvier 2007
    Messages : 13 474
    Points : 36 571
    Points
    36 571
    Par défaut


    Désolé pour les </col> : un copier/coller un peu rapide, à partir d'une source ... pas assez fiable
    (par contre, je pensais que le display fonctionnait)

    A+

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Afficher/cacher une partie
    Par ark42 dans le forum Général JavaScript
    Réponses: 3
    Dernier message: 27/07/2006, 13h18
  2. [Tableau] récupérer une partie d'un tableau
    Par keyra dans le forum Collection et Stream
    Réponses: 2
    Dernier message: 07/02/2006, 22h17
  3. Afficher/Cacher une partie d'une page
    Par frechy dans le forum Balisage (X)HTML et validation W3C
    Réponses: 3
    Dernier message: 12/01/2006, 14h18
  4. passer une partie d'un tableau en paramettre.
    Par monstroplante dans le forum Langage
    Réponses: 13
    Dernier message: 04/11/2005, 01h22
  5. Afficher / Cacher une partie d'un formulaire
    Par damjal dans le forum Général JavaScript
    Réponses: 5
    Dernier message: 17/10/2005, 18h10

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo