Rotation de couleurs (cell's background-color)

**Zorro en pyjama** · 14/09/2016, 18h53

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>

**NoSmoking** · 14/09/2016, 19h27

Bonjour,
applique la même méthode/principe que celle dont on a parlé dans cette discussion.

**Beginner.** · 16/09/2016, 01h10

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...

**Softcadbury** · 16/09/2016, 04h04

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.

**Softcadbury** · 16/09/2016, 04h36

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

**Softcadbury** · 16/09/2016, 05h25

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

Rotation de couleurs (cell's background-color)

JavaScript

Vue hybride

Discussions similaires

Partager

Partager