Rotation des couleurs de fond des cellules d'un tableau

Invité · 21/04/2015, 17h30

Bonjour à tous,

Après de nombreuses recherches et tirages de cheveux, je sollicite votre aide pour comprendre comment faire

Je souhaite créer une fonction qui effectue une rotation des couleurs de fond des cellules de mon tableau HTML en cliquant sur le bouton.
la rotation doit être : bleu, rouge, orange, vert, jaune -> rouge, orange, vert, jaune, bleu -> orange, vert, jaune, bleu, rouge...

Voici mes code HTML et CSS :

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
31
32
33
34
35
36
37
38
39
40
41
42
<html>
<head>
<meta charset="utf-8">
<link type="text/css" rel="stylesheet" href="tableau_styles.css">
<script language="Javascript"src="rotation.js" type="text/javascript"></script>
</head>
<body>
  <table id="tableau">
  <caption>Tableau 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">
  <form method="post">
  <input type="button" value="rotation" onclick="javascript:rotation();"/>
  </form>
  </div>
</body>
</html>

Code css :

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
body {
  position:absolute;
  margin-left:300px;
}
 
 
caption {
  font:bolder 16pt Algerian;
}  
 
 
#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:collapse;
  align:center;
  width:400px;
  font: bolder #black;
  text-align:center;
}

Merci d'avance !

**SpaceFrog** · 22/04/2015, 09h06

Plusieurs remarques sur ton code :

Un id DOIT être unique sur la page !
Passe plutôt par une class sur le tr
évite un form en post juste pour une action sur un bouton
un onclcik n'attend pas autre chose que du javascript, donc javascript: est inutile.

Sinon avec Jquery ça donnerait un truc comme ça
http://fiddle.jshell.net/tdazpz6j/

Invité · 22/04/2015, 13h02

Merci, j'ai fait les corrections.

Est-ce que c'est bien avec

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementByClassName("blue").style.backgroundColor

que j'accède au css pour le manipuler ?

**Bovino** · 22/04/2015, 14h13

Non. Contrairement aux id, plusieurs éléments peuvent avoir la même classe, du coup, la méthode getElementsByClassName() (avec un "s" donc) renvoie une collection. Pour avoir accès à la propriété style, il faut parcourir cette collection et traiter les éléments séparément.

**SylvainPV** · 22/04/2015, 15h15

Est-ce que ce sont les lignes entières qui doivent bouger ou seulement leur couleur de fond ?

**SpaceFrog** · 22/04/2015, 15h29

a priori les couleur de fond, sinon il suffit de faire le push shift sur la collection des lis ou plus simple juste un append du eq(1)

**SylvainPV** · 22/04/2015, 15h36

J'ai eu un doute quand j'ai vu la ligne Bleue de ta démo devenir rouge

Invité · 22/04/2015, 15h38

Ce sont juste les couleurs de fond qui doivent bouger.

Je comprends pas bien : la méthode getElementsByClassName() (avec un "s" donc) renvoie une collection. Pour avoir accès à la propriété style, il faut parcourir cette collection et traiter les éléments séparément.

document.getElementsByClassName("blue") : me permet d'accéder à tous les éléments de la class "blue" et
document.getElementsByClassName("blue").style.backgroundColor : me permet d'accéder à la couleur de fond de la class "blue" du document
c'est ça ?

parce que du coup ma feuille de style étant à part, je n'ai pas de balise style ?

Invité · 22/04/2015, 16h07

Merci de prendre le temps de m'aider à comprendre

Est-ce que pour récupérer en lecture seule le background de chaque class ça ce serait bon ? Vu que la feuille de style est un fichier à part.
exemple pour la class "blue" :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
var blue = document.getElementsByClassName('blue'),
               backgroundColor = get.ComputedStyle(blue).backgroundColor;

Ensuite, si c'est bien cela, il faudrait donc que je déclare un tableau js avec mes nouvelles variables, puis que je gère le changement de background ?

**SpaceFrog** · 22/04/2015, 16h21

getElementsByClassName

une collection ...

**Bovino** · 22/04/2015, 16h26

document.getElementsByClassName("blue") : me permet d'accéder à tous les éléments de la class "blue"

Oui.

et document.getElementsByClassName("blue").style.backgroundColor : me permet d'accéder à la couleur de fond de la class "blue" du document

En aucun cas. Je te l'ai expliqué (et Spaffy l'a répété) tu récupères une collection d'éléments, or la propriété style s'applique à un élément DOM (et n'a rien à voir avec une balise style).
Il faut donc parcourir les éléments du DOM composant la collection pour gérer leurs propriétés de style.

Invité · 22/04/2015, 16h45

Je suis un peu longue à la détente pour le coup désolée, je viens de relire mon cours sur le DOM, et je veux vraiment comprendre une bonne fois pour toute

Je reformule :j'accède d'abord à l'élément ayant pour class "blue" c'est à dire ici le <td> du document via document.getElementsByClassName("blue")

Ensuite j'accède au style (cascading style sheet et non balise) de l'élément de cette class en ajoutant .style soit : document.getElementsByClassName("blue").style
puis j'accède au background-color du style de l'élément de cette class en ajoutant .backgroundColor soit document.getElementsByClassName("blue").style.backgroundColor

Est-ce que cette fois j'y suis ?

**Bovino** · 22/04/2015, 16h51

tu récupères une collection d'éléments

Il faut donc parcourir les éléments du DOM composant la collection

C'est plus visible comme ça ?

**SpaceFrog** · 22/04/2015, 17h03

document.getElementsByClassName("blue") : me permet d'accéder à tous les éléments de la class "blue"

document.getElementsByClassName("blue")[0] permet d'accéder au premier élément de la collection des éléments de la class "blue"

Invité · 22/04/2015, 17h31

Merci SpaceFrog pour ta patience, j'ai vraiment envie de comprendre. Je vais voir mieux la construction du DOM afin de comprendre les éléments objets, je vois que c'est ça qui me manque clairement.

Bovino : ce n'est pas la peine d'être humiliant sous prétexte que je ne comprends pas ta manière d'expliquer. Je suis là pour apprendre ! C'est exactement ce genre de comportements qui font que que l'on ose plus poser de questions !

Invité · 22/04/2015, 18h05

getElementByClassName('blue').firstChild lecture du 1er <td> (après correction appliquée :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 <tr class="blue">
    <td>1</td>
    <td>Bleu</td>
  </tr>

et :
getElementByClassName('blue').innerHTML est le contenu des éléments de type String, donc "1" et "Bleu" ?

**Bovino** · 23/04/2015, 07h43

getElementByClassName('blue').innerHTML

**SylvainPV** · 23/04/2015, 09h58

Avec un seul élément :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
var element = document.getElementById('box');
element.style.backgroundColor = "green";

Avec une collection d'éléments :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
var elements = document.getElementsByClassName('boxes');
for(var i=0, l=elements.length; i<l; i++){
  var element = elements[i];     
  element.style.backgroundColor = "green";
}

C'est plus clair ?

Invité · 24/04/2015, 00h09

Merci, j'ai enfin capté le truc. Il me manquait le fait que ce soit via un tableau que la collection d'éléments est lue. Et donc un accès aux éléments via l'indice, puis aux attribut avec le "." vu que ce sont des noeuds. Je suis parée pour continuer à apprendre.

**SylvainPV** · 24/04/2015, 01h09

Oui on a plein de notions plus ou moins équivalentes à quelques subtilités près :
- Tableau, collection, liste, Array
- Propriétés, attributs
- clés, indices, index

Les collections ont des index numériques (de 0 à length-1), tandis que les propriétés des objets sont très souvent des index en String. La notation avec le "." est un raccourci, mais on peut écrire array.length ou array["length"]

Rotation des couleurs de fond des cellules d'un tableau

JavaScript

Discussions similaires

Partager

Partager