Rotation de couleurs (cell's background-color)
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:
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> |
