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

**Beginner.** · 16/09/2016, 16h59

Salut,

Oui merci, je regarde ça, cela m'a l'air bien instructif...

**l_autodidacte** · 16/09/2016, 17h12

Bonjour
JavaScript n'est ma spécialité, mais en suivant une certaine logique,et en essayant d'apprendre, j'ai pu faire ceci en notant que j'ai volontairement ajouté quelques lignes au tableau tel qu'il était au premier post (ajout pour mieux visualiser pendant le test) mais sans utilisation d'une source extérieure(fichier.js) :

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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script language="Javascript" type="text/javascript">
function rotation(){
var elements=document.getElementById('tableau').getElementsByTagName('td');
var L=elements.length-1;
var tb=[15], CellText=[15];
for (var j=0;j<=L-2;j++){
    tb[j]=elements[j+2].getAttribute('id');
    CellText[j]=elements[j+2].getAttribute('innerHTML');
                     }
 
   tb[L-1]=elements[0].getAttribute('id'); CellText[L-1] = elements[0].getAttribute('innerHTML');
   tb[L]=elements[1].getAttribute('id');   CellText[L] = elements[1].getAttribute('innerHTML');           
 
for(var i=0; i<=L; i++){
  var element=elements[i];     
  element.setAttribute('id', tb[i]);
  element.setAttribute('innerHTML', CellText[i]);
                        }
}
 </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;   
}
 
 #magenta {
  border:2px solid #F00;
  background-color:magenta;   
}
 
#cyan {
  border:2px solid #F00;
  background-color:cyan;   
}
 
#lightgreen {
  border:2px solid #F00;
  background-color:lightgreen;   
}
.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&eacute;ro de cellule</th>
    <th class="titre">couleur</th>
  </tr>
  <tr id="10" class="blue">
    <td id="blue">1</td>
    <td id="blue">Bleu</td>
  </tr>
  <tr id="11" class="red">
    <td id="red">2</td>
    <td id="red">Rouge</td>
  </tr>
  <tr id="12" class="orange">
    <td id="orange">3</td>
    <td id="orange">Orange</td>
  </tr>
  <tr id="13" class="green">
    <td id="green">4</td>
    <td id="green">Vert</td>
  </tr>
  <tr id="14" class="yellow">
    <td id="yellow">5</td>
    <td id="yellow">Jaune</td>
  </tr>    
  <tr id="15" class="magenta">
    <td id="magenta">6</td>
    <td id="magenta">Magenta</td>
  </tr>    
  <tr id="16" class="cyan">
    <td id="cyan">7</td>
    <td id="cyan">Cyan</td>
  </tr>    
 
  <tr id="17" class="lightgreen">
    <td id="lightgreen">8</td>
    <td id="lightgreen">vert clair</td>
  </tr>
 
  </table>
  </br>
  <div align="center">
    <input type="button" value="Rotation" onclick="rotation()"/>
  </div>
</body>
</html>

**Beginner.** · 16/09/2016, 19h42

Salut,

J'ai testé ton code ici : http://jsbin.com/nilumeqaba/edit?html,output

Cela fonctionne mais la rotation se fait en sens inverse (c'est un détail, le principe est là)...

**l_autodidacte** · 18/09/2016, 00h02

Pour faire la rotation des couleurs et le contenu des cellules du tableau, remplace la fonction rotation précédente par celle-ci :

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
function rotation(){
var elements=document.getElementById('tableau').getElementsByTagName('td');
var L=elements.length-1;
var tb=[15], CellText=[15];
for (var j=0;j<=L-2;j++){
    tb[j]=elements[j+2].getAttribute('id');
    CellText[j]=elements[j+2].innerHTML;
                     }
 
   tb[L-1]=elements[0].getAttribute('id'); CellText[L-1] = elements[0].innerHTML;
   tb[L]=elements[1].getAttribute('id');   CellText[L] = elements[1].innerHTML;           
 
for(var i=0; i<=L; i++){
  var element=elements[i];     
  element.setAttribute('id', tb[i]);
  element.innerHTML=CellText[i];
                        }
}

car il parait que getAttribute ne fonctionne pas avec innerHTML pourtant en HTA cela fonctionne correctement.

Pour inverser le sens de la rotation il suffit (avec quelques petites modifications) d'inverser la boucle for for (var j=L-2;j>=0;j--)

**Beginner.** · 18/09/2016, 15h27

Salut,

Oui j'ai testé et cela fonctionne...

Je remplacerais quand même ceci :

Code :

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

1
2
var L=elements.length-1;
var tb=[15], CellText=[15];

Par cela :

Code :

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

1
2
var L=elements.length-1;
var tb=[L], CellText=[L];

C'est un détail mais ça peut être très utile dans de gros programme, c'est plus facile à comprendre je trouve et si la valeur de L change cela se répercute automatiquement sur tb et CellText...

**NoSmoking** · 18/09/2016, 18h03

Attention :
var tb=[15] déclare un variable tb de type Array dont le premier, et seul élément, vaut 15. En aucun cas cela initialise un tableau de 15 éléments, vide, contrairement à l'écriture new Array(15).

Pour en revenir au code initial de Zorro en pyjama on pourrait faire les remarques suivantes :

<script language="Javascript" src="rotation.js" type="text/javascript"> le code mis à l'intérieur d'une balise <script> qui possède une src n'est pas interprété ;
un ID doit être unique, autant utiliser des classes dans le cas présent pour pouvoir les échanger ;
il est préférable de travailler sur les <tr> et non les <td> ;
dans onclick="javascript:rotation();"/> la référence à javascript est de trop, et autant utiliser une balise <button> qui est prévue pour exécuter une action javascript
A quoi sert "javascript:" dans une balise HTML ?

Concernant les codes des fonctions réalisées, la fonction #5, celle de Softcadbury reste la plus pertinante, elle travaille sur base des <tr>

Reprise de la fonction #5

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
function rotation5() {
  var elements = document.getElementsByClassName('line');
  var lastElementClassName = elements[elements.length-1].className;
 
  for (i=elements.length-1; i > 0; i--) {
    elements[i].className = elements[i-1].className;
  }
 
  elements[0].className = lastElementClassName;
 
  console.log("rotation5");
}

**Beginner.** · 18/09/2016, 19h17

Merci NoSmoking,

Envoyé par NoSmoking

Attention :
var tb=[15] déclare un variable tb de type Array dont le premier, et seul élément, vaut 15. En aucun cas cela initialise un tableau de 15 éléments, vide, contrairement à l'écriture new Array(15).

Ah oui bien vu ! Je me suis aussi fait avoir, c'est traitre quand même...

Envoyé par NoSmoking

il est préférable de travailler sur les <tr> et non les <td> ;

Oui c'est aussi ce que j'avais fait mais avec des identifiants ce qui semble moins bien que d'utiliser des class comme l'a fait Softcadbury...

**l_autodidacte** · 22/09/2016, 01h23

Ah oui bien vu ! Je me suis aussi fait avoir, c'est traitre quand même...

J'avais déjà dit dans mon premier post que je ne suis pas spécialiste en JavaScript... Je n'ai voulu induire personne en erreur. Mes connaissances dans ce domaine sont bien restreintes, j'essaie donc d'apprendre mais je n'ai pas de documentations bien consistantes.

Pour la fonction rotation5, sur ma plateforme actuelle(XP SP3), aucun effet sinon un message d'erreur Cet objet ne gère pas cette propriété ou cette méthode en indiquant la ligne var elements = document.getElementsByClassName('line');.

Pour le changement de sens de la rotation et toujours avec mon code, qui s'avère bien basique si ce n'est pas futile, j'ai modifié la fonction rotation de façon à jouer sur le paramètre à lui passer. On ajoute également un bouton tout juste après(ou avant peu importe) le bouton existant :

Code :

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

1
2
3
4
  <div align="center">
    <input type="button" value="Rotate up" onclick="rotation(1)"/>
    <input type="button" value="Rotate down" onclick="rotation(0)"/>
  </div>

puis la fonction :

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
function rotation(sens){
var elements=document.getElementById('tableau').getElementsByTagName('td');
var L=elements.length-1;
var tb=new Array(L), CellText=new Array(L);
var s='';
//Rotation vers le haut
if(sens==1){
 for (var j=0;j<=L-2;j++){
    tb[j]=elements[j+2].getAttribute('id');
    CellText[j]=elements[j+2].innerHTML;}
 
    tb[L-1]=elements[0].getAttribute('id'); CellText[L-1] = elements[0].innerHTML;
    tb[L]=elements[1].getAttribute('id');   CellText[L] = elements[1].innerHTML;}
//Rotation vers le bas
else if(sens==0){
  for (var j=0;j<=L-2;j++){
    tb[j+2]=elements[j].getAttribute('id');
    CellText[j+2]=elements[j].innerHTML;}
 
    tb[0]=elements[L-1].getAttribute('id'); CellText[0] = elements[L-1].innerHTML;
    tb[1]=elements[L].getAttribute('id');   CellText[1] = elements[L].innerHTML;}
 
for(var i=0; i<=L; i++){
  var element=elements[i];     
  element.setAttribute('id', tb[i]);
  element.innerHTML = CellText[i];}
}

**NoSmoking** · 22/09/2016, 20h03

Envoyé par l_autodidacte

Mes connaissances dans ce domaine sont bien restreintes, j'essaie donc d'apprendre...

ce qui est tout à fait louable

néanmoins, tu t'es éloigné du cahier des charges initial

Envoyé par Zorro en pyjama

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

tu travailles sur les innerHTML et les id, en fait cela revient à déplacer les lignes dans la <table> et pour cela il y aurait d'autres méthodes.

Pour la fonction rotation5, sur ma plateforme actuelle(XP SP3), aucun effet sinon un message d'erreur Cet objet ne gère pas cette propriété ou cette méthode en indiquant la ligne var elements = document.getElementsByClassName('line');.

, dans cette « exercice » il est tout à fait possible de ce passer de ce genre de méthode et utiliser les collections disponibles pour les <table> et les <tr>, j'ai cité rows et cells, ici on n'en a pas besoin. En fait il suffit de récupérer l'élément <table> et cela est reconnu même par ton antique navigateur.

Code :

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

1
2
3
4
// récup. de l'élément <table>
var oTable = document.getElementById('tableau');
// récup. des lignes <tr> de la <table>
var oTR = oTable.rows

après tout le monde est plus ou moins d'accord sur la façon de procéder, la fonction pourrait donc ressembler à cela (volontairement verbeux)

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
function rotation() {
    // récup. de l'élément <table>
    var oTable = document.getElementById('tableau');
    // récup. des lignes <tr> de la <table>
    var oTR = oTable.rows;
    // init diverses
    var i, nb = oTR.length;
    var deb = 1, fin = nb - 1;
    var classTemp;
    // sauve la class de la 1st ligne traitée
    var saveClass = oTR[deb].className;
    // parcours des <tr> sauf dernière
    for (i = deb; i < fin; i += 1) {
        // get la classe suivante
        classTemp = oTR[i + 1].className;
        // change la classe de la ligne
        oTR[i].className = classTemp;
    }
    // affecte la classe de la 1st ligne sauvegardé
    oTR[i].className = saveClass;
}

Maintenant avec cette même fonction si tu souhaites avoir les deux sens de déplacement des couleurs on peut l'adapter sur base de la rotation des Array et qui utilisera la même et unique boucle, certes c'est un peu « sioux » mais je vous la met.

Explication, du moins tentative, en live dans les commentaires

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
function rotation(sens) {
    // récup. de l'élément <table>
    var oTable = document.getElementById('tableau');
    // transforme une nodeList en Array
    var oTR = [].slice.call(oTable.rows);
    // si sens inverse
    if (sens === - 1) {
        // récup. entête
        var entete = oTR.shift();
        // inverse l'ordre dans le tableau
        oTR.reverse();
        // remet l'entête en début
        oTR.unshift(entete);
    }
    // on a donc une routine unique pour les 2 sens
    var i, nb = oTR.length;
    var deb = 1, fin = nb - 1;
    var classTemp;
    // sauve la class de la 1st ligne traitée
    var saveClass = oTR[deb].className;
    // parcours des <tr> sauf dernière
    for (i = deb; i < fin; i += 1) {
        // get la classe suivante
        classTemp = oTR[i + 1].className;
        // change la classe de la ligne
        oTR[i].className = classTemp;
    }
    // affecte la classe de la 1st ligne sauvegardé
    oTR[i].className = saveClass;
}

avec un peu de HTML pour lancer les actions

Code html :

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

1
2
<button onclick="rotation(  );">▲ rotation ▲</button>
<button onclick="rotation(-1);">▼ rotation ▼</button>

Pas de soucis pour des commentaires supplémentaires

Bon d'accord on « squate » un peu la discussion mais c'est pour la bonne cause.

**Beginner.** · 22/09/2016, 22h06

Merci c'est intéressant...

Envoyé par l_autodidacte

J'avais déjà dit dans mon premier post que je ne suis pas spécialiste en JavaScript... Je n'ai voulu induire personne en erreur. Mes connaissances dans ce domaine sont bien restreintes, j'essaie donc d'apprendre mais je n'ai pas de documentations bien consistantes.

Euh mais non, je n'ai à aucun moment pensé que tu voulais induire qui que ce soit en erreur, mon message n'était pas dirigé contre toi je te rassure... Ce n'est pas mon genre...

Je voulais juste dire que moi aussi je m'étais fait avoir tout comme toi, eh oui je suis aussi débutant...

Et tout comme toi je profite des discussions pour pratiquer, m'exercer sur des cas réels.

Envoyé par l_autodidacte

...j'essaie donc d'apprendre mais je n'ai pas de documentations bien consistantes.

Tu es peut-être déjà au courant mais au cas où il y a ceci qui pourrait t'intéresser : Mise en place d'une série d'exercices pour apprendre le JavaScript et Node.js

**Zorro en pyjama** · 17/10/2016, 16h34

Merci à vous tous (mention spéciale à NoSmoking, qui a toujours les bonnes remarques pour faire avancer le schmilblick)
grâce à vos remarques et corrections, j'ai bien progressé en conception web et je vous remercie pour le temps que vous avez pris pour vos explications.

Rotation de couleurs (cell's background-color)

JavaScript

Discussions similaires

Partager

Partager