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)

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 ?

Rotation des couleurs de fond des cellules d'un tableau

JavaScript

Vue hybride

Discussions similaires

Partager

Partager