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

HTML Discussion :

Affichage et masquage tableaux


Sujet :

HTML

  1. #1
    Nouveau Candidat au Club
    Homme Profil pro
    Ingénieur développement matériel électronique
    Inscrit en
    Mai 2022
    Messages
    2
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Belgique

    Informations professionnelles :
    Activité : Ingénieur développement matériel électronique
    Secteur : High Tech - Électronique et micro-électronique

    Informations forums :
    Inscription : Mai 2022
    Messages : 2
    Points : 1
    Points
    1
    Par défaut Affichage et masquage tableaux
    Bonjour,

    J'affiche deux tables sur ma page et suivant la sélection de bouton radio, les tables peuvent apparaitre ou disparaitre.
    Au démarrage ça fonctionne bien, les colonnes des deux tables sont alignées.

    Nom : Capture d’écran 2022-05-17 145330.jpg
Affichages : 160
Taille : 57,7 Ko

    Ensuite si on change d'index bouton radio et après l'appel à la fonction showHideDiv() le formatage CSS disparait si on revient au bouton radio 0:
    Code javascript : 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
    /**
     * 
     * Affiche les lignes paramètres en fonction du mode
     */
    function showHideDiv(val)
    {
     if(val == 1)
     {
        document.getElementById("tableFanType").style.display='block'; 
        document.getElementById("tableSetpoint").style.display='block'; 
     
     }
     else if(val == 2 || val == 3)
     {
        document.getElementById("tableFanType").style.display="block"; 
        document.getElementById("tableSetpoint").style.display="none"; 
     
     }
     else if(val == 4)
     {
        document.getElementById("tableFanType").style.display='none';  
        document.getElementById("tableSetpoint").style.display='none'; 
     
     }    
    }
    Nom : Capture d’écran 2022-05-17 145529.jpg
Affichages : 151
Taille : 52,5 Ko

    Est-ce que quelqu'un aurait une idée pour garder le formatage CSS après passage dans la fonction javascript?
    Merci

  2. #2
    Membre émérite Avatar de darkstar123456
    Homme Profil pro
    Développeur Web
    Inscrit en
    Mars 2008
    Messages
    1 896
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : Belgique

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Mars 2008
    Messages : 1 896
    Points : 2 835
    Points
    2 835
    Par défaut
    Bonjour,

    Malheureusement, c'est difficile de répondre avec un si petit extrait de code....

    Donc la seule chose que je vois est que :
    - soit il y a plein de colonnes créées à la suite, et qui remplirait totalement la ligne (y'a peu de chances pcq il faudrait créer vraiment beaucoup, beaucoup de colonnes)
    - soit il y a perte de la propriété width du tableau (qui passe de 100% à auto) => y'a de grandes chances que ça soit ça vu à quoi ressemble le tableau sur le 2e screenshot
    - soit il une largeur définie sur les colonnes et d'une manière ou d'une autre cette propriété est perdue


    EDIT : je viens de mettre 30min et reproduire +/- le code pour essayer de reproduire le problème : https://codepen.io/DarkStar123456/pen/jOZBMmV
    Et de fait, je ne fonctionne jamais en affichant/cachant un tableau directement mais plutôt un div qui englobe.

    Cependant, en reproduisant le code et suivant les ID j'ai trouvé où est le problème :
    .style.display = 'block'; pour une table ça ne fonctionne pas
    Voici la version corrigée avec .style.display = 'table'; (lignes 6 et 7 du JS) : https://codepen.io/DarkStar123456/pen/LYQWZBe

    N'hésitez pas à partager l'entièreté de votre code, ça m'aurait pris 10s au lieu de 30min

  3. #3
    Nouveau Candidat au Club
    Homme Profil pro
    Ingénieur développement matériel électronique
    Inscrit en
    Mai 2022
    Messages
    2
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Belgique

    Informations professionnelles :
    Activité : Ingénieur développement matériel électronique
    Secteur : High Tech - Électronique et micro-électronique

    Informations forums :
    Inscription : Mai 2022
    Messages : 2
    Points : 1
    Points
    1
    Par défaut
    Merci beaucoup, oui j'aurai peut-être dû mettre plus de code.

    Je vais regarder à cela.

  4. #4
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 933
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 933
    Points : 44 084
    Points
    44 084
    Par défaut
    Bonjour,
    lorsque l'on change le style.display, via JavaScript, en none la meilleure façon de rétablir celui-ci est de le mettre à ""
    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    // masque l'élément
    element.style.display = "none";
     
    // rétabli le display d'origine
    element.style.display = "";

    PS : passer par l'ajout/suppression d'une classe est également une bonne méthode et il y en a d'autre comme ajouter un attribut hidden ...

  5. #5
    Membre émérite Avatar de darkstar123456
    Homme Profil pro
    Développeur Web
    Inscrit en
    Mars 2008
    Messages
    1 896
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : Belgique

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Mars 2008
    Messages : 1 896
    Points : 2 835
    Points
    2 835
    Par défaut
    Hello,

    Bien vu pour le element.style.display = "";.
    Ca fait bien longtemps que je n'ai plus fait de JS natif et je n'ai pu l'habitude, merci pour cet ajout/correctif ^^
    Je retiendrai à l'avenir car ca évite biiiiiien des problèmes (car en plus des tableaux, on a maintenant les CSS Grid & Flexbox)

Discussions similaires

  1. Réponses: 3
    Dernier message: 13/05/2009, 23h14
  2. jQuery/DOM affichage de n tableaux
    Par noobC dans le forum jQuery
    Réponses: 2
    Dernier message: 13/08/2008, 13h21
  3. Affichage de trois tableaux
    Par mimi2311 dans le forum Pascal
    Réponses: 3
    Dernier message: 26/04/2008, 01h40
  4. Affichage et masquage
    Par Roromix dans le forum Balisage (X)HTML et validation W3C
    Réponses: 3
    Dernier message: 14/09/2006, 22h58
  5. Affichage et masquage de barres d'outil en code
    Par faiglon dans le forum Access
    Réponses: 2
    Dernier message: 08/08/2006, 11h34

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