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 !
Partager