kewan | Bonjour tout le forum,
j'ai besoin de votre aide.
Je voudrais permettre à l'utilisateur de choisir entre deux tableaux.
Je voudrais créer un formulaire avec deux boutons d'option (type="radio" ) et suivant le bouton sélectionné le tableau correspondant apparait dans une div.
Comment obtenir ce résultat ? Fonction avec innerHTML ? fonction qui inclut une page ?
Voilà un rapide exemple de ce que je voudrais obtenir.
En réalité mon tableau est beaucoup plus grand, il fait une centaine de lignes.
Le css sera dans un fichier css
Les fonctions seront dans un fichier js dédié.
Code :
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8" />
- <title>test2</title>
- <style type="text/css">
- table {
- border-collapse: collapse;
- border: 3px solid rgb(0, 0, 0);
- width: 50%;
- background-color: rgb(194, 194, 194);
- text-align: center;
- color: rgb(0, 0, 0);
- margin: 8px;
- }
- table th {
- border: 3px solid rgb(0, 0, 0);
- }
- table tr {
- border: 3px solid rgb(0, 0, 0);
- }
- table td {
- border: 3px solid rgb(0, 0, 0);
- }
- .grille {
- display: inline-block;
- vertical-align: top;
- border: 3px solid blue;
- }
- .formulaire {
- display: inline-block;
- vertical-align: top;
- border: 3px solid blue;
- }
- </style>
- <script type="text/javascript">
- function typeGrille1() {
- x = document.getElementsByClassName("grille" );
- x[0].innerHTML =
- "<table class='table'><thead><tr><th>Grille1</th><th>Grille1</th><th>Grille1</th></tr></thead><tbody><tr><td>1</td><td>1</td><td>1</td></tr></tbody></table>";
- }
- function typeGrille2() {
- x = document.getElementsByClassName("grille" );
- x[0].innerHTML =
- "<table class='table'><thead><tr><th>Grille2</th><th>Grille2</th><th>Grille2</th></tr></thead><tbody><tr><td>2</td><td>2</td><td>2</td></tr></tbody></table>";
- }
- </script>
- </head>
- <body class="s2">
- <div class="formulaire">
- <input
- type="radio"
- name="typeGrille"
- value="1"
- id="1"
- onclick="typeGrille1()"
- /><label for="1">grille1</label><br />
- <input
- type="radio"
- name="typeGrille"
- value="2"
- id="2"
- onclick="typeGrille2()"
- /><label for="2">grille2</label>
- </div>
- <div class="grille"></div>
- </body>
- </html>
|
Merci pour votre aide. |