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 :

Rotation de couleurs (cell's background-color)


Sujet :

JavaScript

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre averti
    Homme Profil pro
    en formation
    Inscrit en
    Janvier 2016
    Messages
    47
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Calvados (Basse Normandie)

    Informations professionnelles :
    Activité : en formation

    Informations forums :
    Inscription : Janvier 2016
    Messages : 47
    Par défaut Rotation de couleurs (cell's background-color)
    Bonjour à tous,
    Peut-on avoir un coup de main avec le code ci-joint; il s'agit, en cliquant sur le bouton 'Rotation' qui se trouve sous le tableau, de changer la couleur de la cellule (tableau de 5 lignes, la ligne 1 donne sa couleuir à la ligne 2, la ligne 2 donne sa couleur à la ligne 3,..., et la ligne 5 donne sa couleur à la ligne 1 bien sûr)
    Merci à vous

    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
    89
    90
    91
    92
    93
    94
    95
    96
    97
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <script language="Javascript" src="rotation.js" type="text/javascript">
     
    var elements=document.getElementsByClassName('boxes');
    for(var i=0, l=elements.length; i<l; i++){
      var element=elements[i];     
      element.style.backgroundColor="blue";
    }
     </script>
    </head>
     
    <style>
    body {
      position:absolute;
      margin-left:300px;
    }
     
     caption {
      font:bolder 16pt Century;
    }  
     
     #blue {
      border:2px solid #F00;
      background-color:blue; 
    } 
     
    #red {
      border:2px solid #F00;
      background-color:red;  
    }
     
    #orange {
      border:2px solid #F00;
      background-color:orange;
    }
     
    #green {
      border:2px solid #F00;
      background-color:green;  
    }
     
    #yellow {
      border:2px solid #F00;
      background-color:yellow;   
    }
     
    .titre {
      border:2px solid #F00;
    }
     
    table {
      border-collapse:no collapse;
      align:center;
      width:400px;
      font: bolder #black;
      text-align:center;
    }
    </style>
     
    <body>
      <table id="tableau">
      <caption>TABLEAUX ET STYLES</caption></br>
      <tr>
        <th class="titre">Numéro de cellule</th>
    	<th class="titre">couleur</th>
      </tr>
      <tr>
        <td id="blue">1</td>
        <td id="blue">Bleu</td>
      </tr>
      <tr>
        <td id="red">2</td>
        <td id="red">Rouge</td>
      </tr>
      <tr>
        <td id="orange">3</td>
        <td id="orange">Orange</td>
      </tr>
      <tr>
        <td id="green">4</td>
        <td id="green">Vert</td>
      </tr>
      <tr>
        <td id="yellow">5</td>
        <td id="yellow">Jaune</td>
      </tr>	
      </table>
      </br>
      <div align="center">
      <input type="button" value="rotation" onclick="javascript:rotation();"/>
     
      </div>
    </body>
    </html>

  2. #2
    Modérateur

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

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 209
    Par défaut
    Bonjour,
    applique la même méthode/principe que celle dont on a parlé dans cette discussion.

  3. #3
    Membre Expert
    Homme Profil pro
    Inscrit en
    Octobre 2011
    Messages
    2 910
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Octobre 2011
    Messages : 2 910
    Par défaut
    Salut,

    J'ai voulu essayer histoire de me faire un petit exercice...

    J'ai fait comme l'a suggéré NoSmoking mais dans ce cas il m'a semblé qu'il fallait au moins deux variables temporaires (fonction rotation2) ou cinq (fonction rotation1) si on veut que le code soit plus lisible.

    J'ai voulu aussi utiliser une autre méthode (fonction rotation3) avec des boucles for car je me suis dit que si il y avait beaucoup plus de lignes, les deux premières méthodes deviendraient fastidieuses...

    Voici mon test ici : http://jsbin.com/sezereruhu/edit?html,js,output


    PS : Tu as utilisé plusieurs fois le même identifiant or il me semble que celui-ci doit être unique dans une page donnée...

  4. #4
    Membre averti Avatar de Softcadbury
    Homme Profil pro
    Ingénieur développement logiciels
    Inscrit en
    Août 2016
    Messages
    30
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Hauts de Seine (Île de France)

    Informations professionnelles :
    Activité : Ingénieur développement logiciels

    Informations forums :
    Inscription : Août 2016
    Messages : 30
    Par défaut
    Hello, ta fonction rotation3 est clairement la meilleure des trois. Elle est beaucoup plus simple à maintenir, il suffit d'incrémenter nbrLignes pour ajouter une nouvelle ligne.

    Mais je pense que tu peux encore faire mieux en arrêtant d'utiliser les id mais plutôt une même class pour toutes les lignes. Du coup il te suffirait de boucler sur tous les éléments qui utilisent cette class.

  5. #5
    Membre averti Avatar de Softcadbury
    Homme Profil pro
    Ingénieur développement logiciels
    Inscrit en
    Août 2016
    Messages
    30
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Hauts de Seine (Île de France)

    Informations professionnelles :
    Activité : Ingénieur développement logiciels

    Informations forums :
    Inscription : Août 2016
    Messages : 30
    Par défaut
    Bon j'ai bien galèré avec ma tablette mais j'ai écrit la fonction rotation4, je te laisse regarder. http://jsbin.com/wojoxejobo/edit?js

  6. #6
    Membre averti Avatar de Softcadbury
    Homme Profil pro
    Ingénieur développement logiciels
    Inscrit en
    Août 2016
    Messages
    30
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Hauts de Seine (Île de France)

    Informations professionnelles :
    Activité : Ingénieur développement logiciels

    Informations forums :
    Inscription : Août 2016
    Messages : 30
    Par défaut
    Bon je ne m'arrête plus^^ J'ai ecrit une fonction rotation5 où cette fois j'améliore la partie algorithmique en effectuant seulement un tour de boucle. http://jsbin.com/keteganodu/edit?js

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

Discussions similaires

  1. Réponses: 0
    Dernier message: 05/05/2014, 17h58
  2. Réponses: 4
    Dernier message: 26/04/2010, 19h22
  3. background-color
    Par canabral dans le forum Balisage (X)HTML et validation W3C
    Réponses: 1
    Dernier message: 15/09/2005, 15h23
  4. [CSS] @media print & background-color
    Par denisC dans le forum Mise en page CSS
    Réponses: 4
    Dernier message: 11/05/2005, 09h21
  5. Réponses: 8
    Dernier message: 09/04/2004, 14h03

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