Rotation des couleurs de fond des cellules d'un tableau

Version imprimable

Bonjour à tous,

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

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:

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:

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 !

22/04/2015, 09h06
SpaceFrog

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/
22/04/2015, 13h02
Invité

Merci, j'ai fait les corrections.

Est-ce que c'est bien avec

Code:

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

que j'accède au css pour le manipuler ?
22/04/2015, 14h13
Bovino

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.
22/04/2015, 15h15
SylvainPV

Est-ce que ce sont les lignes entières qui doivent bouger ou seulement leur couleur de fond ?
22/04/2015, 15h29
SpaceFrog

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)
22/04/2015, 15h36
SylvainPV

J'ai eu un doute quand j'ai vu la ligne Bleue de ta démo devenir rouge :mrgreen:
22/04/2015, 15h38
Invité

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 ?
22/04/2015, 16h07
Invité
Merci de prendre le temps de m'aider à comprendre :D
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:

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 ?
22/04/2015, 16h21
SpaceFrog

getElementsByClassName

une collection ...
22/04/2015, 16h26
Bovino

Citation:

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

Oui.

Citation:

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.
22/04/2015, 16h45
Invité

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 ?
22/04/2015, 16h51
Bovino

Citation:

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

Citation:

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

C'est plus visible comme ça ?
22/04/2015, 17h03
SpaceFrog

Citation:

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"
22/04/2015, 17h31
Invité

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 !
22/04/2015, 18h05
Invité
getElementByClassName('blue').firstChild lecture du 1er <td> (après correction appliquée :
Code:

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" ?
23/04/2015, 07h43
Bovino

Citation:

getElementByClassName('blue').innerHTML

:no:

Avec un seul élément :

Code:

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

Avec une collection d'éléments :

Code:

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 ?

24/04/2015, 00h09
Invité

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.
24/04/2015, 01h09
SylvainPV

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"]
25/04/2015, 17h16
Invité

Merci :)