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 !

Rotation des couleurs de fond des cellules d'un tableau

JavaScript

Mode arborescent

Discussions similaires

Partager

Partager