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 :

onclick pour cacher des <div..>


Sujet :

JavaScript

  1. #1
    Membre du Club
    Homme Profil pro
    Développeur Web
    Inscrit en
    Mars 2007
    Messages
    70
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Tunisie

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Mars 2007
    Messages : 70
    Points : 51
    Points
    51
    Par défaut onclick pour cacher des <div..>
    Salut
    oui je suis pas pro je débute et j'ai un petit souci
    je fais un tableau et je veux permettre à l'utilisateur de cliquer sur des cases d'un tableau pour cacher ou afficher d'autres cases.
    bien sur y a du code javascript avec les onclick pour cacher/afficher
    mais le souci c'est que je peux pas le mettre dans les <tr> ou <td> parce que ça marche avec IE et pas avec Mozilla et GChrome
    donc je devais les mettre dans des <div>
    le soucis c'est que lorsque je cache les div les cases du tableau affichent quand même la couleur de ces div et ça fais bouger les autres cases lors des évènements.
    y a il un moyen de stabiliser ce truc ?
    merci d'avance
    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
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
     
    <style type="text/css">
     
    #c1
    {
    background-color:#33FF33;
    }
    #c2
    {
    background-color:#339900;
     
    }
    #c3
    {
    background-color:#33FF33;
    }
    #c4
    {
    background-color:#339900;
    }
    #c5
    {
    background-color:#33FF33;
    }
    #c6
    {
    background-color:#339900;
    }
    </style>
    <table width=500>
      <tr bgcolor=#339900>
        <td> <div id="c1"  style=" display: none"
    	onclick="
    	document.getElementById('c1').style.display='none';
        document.getElementById('c2').style.display='block';
        document.getElementById('c3').style.display='block';
    	document.getElementById('c4').style.display='none';
    	document.getElementById('c5').style.display='block';
    	document.getElementById('c6').style.display='none';
    	document.getElementById('a3').style.display='none';
    	document.getElementById('a5').style.display='none';
    	document.getElementById('a1').style.display='block';
     
    	">Perso</div></td></td>
        <td><div id="c2" style=" display: block">Perso</div></td>
        <td><div  id="c3" style=" display: block"
    		onclick="
    	document.getElementById('c1').style.display='block';
        document.getElementById('c2').style.display='none';
        document.getElementById('c3').style.display='none';
    	document.getElementById('c4').style.display='block';
    	document.getElementById('c5').style.display='block';
    	document.getElementById('c6').style.display='none';
    	document.getElementById('a1').style.display='none';
    	document.getElementById('a5').style.display='none';
    	document.getElementById('a3').style.display='block';"
    	>Watch List </div></td>
        <td><div id="c4" style=" display: none">Watch List</div> </td>
    		<td bgcolor=#33FF33><div id="c5" style=" display: block" onclick="
    		document.getElementById('c1').style.display='block';
    		document.getElementById('c2').style.display='none';
    		document.getElementById('c3').style.display='block';
    		document.getElementById('c4').style.display='none';
    		document.getElementById('c5').style.display='none';
    		document.getElementById('c6').style.display='block';
    		document.getElementById('a1').style.display='none';
    		document.getElementById('a3').style.display='none';
    		document.getElementById('a5').style.display='block';	
    		"
    		>Inbox</div></td>
        <td><div id="c6" style=" display: none">Inbox</div></td>
      </tr>
      <tr>
        <td colspan=6 bgcolor=#339900></td>
       </tr>
      <tr>
        <td colspan=6><div id="a1">1</div></td>
     
      </tr>
      <tr>
        <td colspan=6><div id="a3" style=" display: none">3</div></td>
     
      </tr>
      <tr>
        <td colspan=6 id="a5" style=" display: none">5</td>
     
      </tr>
    </table>

  2. #2
    Expert éminent sénior
    Avatar de Auteur
    Profil pro
    Inscrit en
    Avril 2004
    Messages
    7 650
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2004
    Messages : 7 650
    Points : 11 143
    Points
    11 143
    Par défaut
    bonjour,


    j'ai regardé et testé ton code et j'avoue ne pas avoir compris la finalité

    Que cherches-tu à faire ?

  3. #3
    Membre du Club
    Homme Profil pro
    Développeur Web
    Inscrit en
    Mars 2007
    Messages
    70
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Tunisie

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Mars 2007
    Messages : 70
    Points : 51
    Points
    51
    Par défaut
    boff je voulais faire un genre de Slider avec des onglets !
    je l'avoue je me suis précipité en postant !
    j'ai trouvé une solution, j'ai fait 3 tableaux

  4. #4
    Expert éminent sénior
    Avatar de Auteur
    Profil pro
    Inscrit en
    Avril 2004
    Messages
    7 650
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2004
    Messages : 7 650
    Points : 11 143
    Points
    11 143
    Par défaut
    Citation Envoyé par visqueu Voir le message
    boff je voulais faire un genre de Slider avec des onglets !
    je l'avoue je me suis précipité en postant !
    j'ai trouvé une solution, j'ai fait 3 tableaux

  5. #5
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Points : 91 220
    Points
    91 220
    Billets dans le blog
    20
    Par défaut
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    <td onclick="this.parentNode.style.display='none';">



    Reste ensuite à trouver l'astuce pour le faire réapparaitre

Discussions similaires

  1. endroit pour cacher des informations
    Par salihovic dans le forum Windows Forms
    Réponses: 2
    Dernier message: 28/07/2009, 14h19
  2. Macro pour cacher des paragraphes
    Par juhel philippe dans le forum VBA Word
    Réponses: 6
    Dernier message: 12/12/2008, 08h41
  3. [VBA-E optimisation code] ameliorer la méthode pour cacher des lignes
    Par EvaristeGaloisBis dans le forum Macros et VBA Excel
    Réponses: 4
    Dernier message: 07/07/2008, 09h53
  4. [DOM] Montrer/Cacher des blocs DIV
    Par Overstone dans le forum Général JavaScript
    Réponses: 25
    Dernier message: 09/08/2007, 10h38
  5. Pb pour cacher des contrôles à l'ouverture d'une page
    Par Anne1969 dans le forum Général JavaScript
    Réponses: 4
    Dernier message: 10/01/2005, 15h16

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