Affichage en fonction de boutons

Par nlbmoi, il y a 2 ans

Les bases HTML/CSS

Bonsoir,

Sur mon site, je dispose de boutons qui permettent de sélectionner un niveau. Lorsque le choix est fait, je souhaite que le tableau correspondant soit affiché.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <style> .bout { border: 1px solid #00b3cd; width: 30px; height: 30px; text-align: center; float: left; margin-right: 5px; border-radius: 10px; background-color: #cef6f5; } .bout:hover { background-color: #2e64fe; } .corx { display: none; border: 1px solid #00b3cd; clear: both; max-width: 630px; } .table-corr { --border-coul: #a3a3a3; width: 90%; margin: auto; border: 10px solid green; border-collapse: collapse; text-align: center; font-family: arial; font-size: 0.9em; line-height: 1.05; table-layout: fixed; } .table-corr caption { border: 1px solid var(--border-coul); border-bottom: none; font-weight: bold; line-height: 3; background-color: #cef6f5; text-align: center; font-size: 1.2 em; } .table-corr thead { background-color: #cef6f5; } .table-corr tbody { font-size: 0.9em; } .table-corr thead th { width: 80%; font-size: 0.9em; color: blue; } .table-corr tr { border: 2px solid var(--border-coul); /* si l'on veut une sépartion des lignes */ } .table-corr thead tr { border-bottom: 5px solid var(--border-coul); } .titre1 { /* équivalent du caption*/ border: 1px solid var(--border-coul); border-bottom: none; font-weight: bold; line-height: 3; background-color: #cef6f5; text-align: center; font-size: 1.2 em; border-bottom: 10px solid green; } .titre2 { /* équivalent du caption*/ background-color: #cef6f5; } .td1 { border-right: 2px solid yellow; border-bottom: 3px solid brown; } .td2 { border-bottom: 3px solid brown; } /* navbar */ .navbar { overflow: hidden; background-color: transparent; width: max-content; margin: 0 auto; height: 52px; } .navbar span { font-size: 16px; color: white; text-align: center; padding: 14px 16px; text-decoration: none; display: inline-block; width: inherit; padding: 10px 0px; } .subnav { overflow: hidden; display: inline-block; width: 70px; } .subnav .subnavbtn { font-size: 20px; outline: none; color: black; padding: 13px 16px; background-color: inherit; font-family: inherit; margin: 0; width: inherit; border: 1px solid #00b3cd; background-color: #91cecd; } .navbar span:hover, .subnav:hover .subnavbtn { background-color: #2e64fe; cursor: pointer; } .subnav-content { display: none; position: absolute; background-color: red; z-index: 1; margin: 0 auto; width: 70px; } .subnav-content span { font-size: 20px; text-decoration: none; color: black; background-color: #91cecd; } .subnav-content span:hover { background-color: #1753f6; color: white; } .subnav-content span:active .subnav-content { display: none; } .desactive { display: none !important; } .subnav:hover .subnav-content { display: block; } </style> </head> <center> <div style="max-width:630px;background-color:#EFFBFB;">Test de ma page. <div id="container"> <h4>Sélectionner votre niveau</h4> <div class="navbar"> <div class="subnav"> <button class="bout" onclick="coula()">A</button> </div> <div class="subnav"> <button class="bout" onclick="coulb()">B</button> </div> <div class="subnav"> <button class="bout" onclick="coulc()">C</button> </div> <div class="subnav"> <button class="bout" onclick="could()">D</button> </div> <div class="subnav"> <button class="bout" onclick="coule()">E</button> </div> <div class="subnav"> <button class="bout" onclick="coulf()">F</button> </div> <div class="subnav"> <button class="bout" onclick="coulg()">G</button> </div> <div class="subnav"> <button class="bout" onclick="coulj()">J</button> </div> </div> <table id="boutA" class="table-corr"> <caption> Titre du tableau </caption> <thead> <tr> <td colspan="3">Niveau A - Assistant <button onclick="demcor()" style="line-height: 14px"> Demander un engagement </button> </td> </tr> <tr> <th style="width: 25%">Emploi</th> <th style="width: 50%">Sujet</th> <th style="width: 25%">Corrigé</th> </tr> </thead> <tbody> <tr> <td rowspan="1" class="td1"> AA-1 </td> <td class="td2"> </td> <td class="td2"></td> </tr> <tr> <td rowspan="10" class="td1"> AA-2 </td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td class="td2"></td> <td class="td2"></td> </tr> <tr> <td rowspan="4" class="td1"> AA-3 </td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td class="td2"></td> <td class="td2"></td> </tr> <tr> <td rowspan="1" class="td1"> AA-4 </td> <td class="td2"></td> <td class="td2"></td> </tr> <tr> <td rowspan="3" class="td1"> AA-5 </td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td class="td2"></td> <td class="td2"></td> </tr> <tr> <td rowspan="1" class="td1"> AA-6 </td> <td class="td2"></td> <td class="td2"></td> </tr> <tr> <td rowspan="2" class="td1"></td> <td></td> <td></td> </tr> <tr> <td class="td2"></td> <td class="td2"></td> </tr> <tr> <td rowspan="1" class="td1"> AA-7 </td> <td class="td2"></td> <td class="td2"></td> </tr> <tr> <td colspan="3" class="titre1">Niveau A - TECH <button onclick="demcor()" style="line-height: 14px">Demander un engagement </button> </td> </tr> <tr class="titre2"> <td style="width: 25%">Emploi-type</td> <td style="width: 50%">Annales</td> <td style="width: 25%">Corrigés</td> </tr> <tr> <td rowspan="23" class="td1">TA-1</td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td class="td2"></td> <td class="td2"></td> </tr> <tr> <td rowspan="14" class="td1"> TA-2 </td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td class="td2"></td> <td class="td2"></td> </tr> <tr> <td rowspan="7" class="td1">TA-3</td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td class="td2"></td> <td class="td2"></td> </tr> <tr> <td rowspan="13" class="td1"> TA-4 </td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td class="td2"></td> <td class="td2"></td> </tr> <tr> <td rowspan="10" class="td1"> TA-5 </td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td class="td2"></td> <td class="td2"></td> </tr> <tr> <td rowspan="5" class="td1"> TA-6 </td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td class="td2"></td> <td class="td2"></td> </tr> <tr> <td rowspan="3" class="td1"> TA-7 </td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td class="td2"></td> <td class="td2"></td> </tr> <tr> <td colspan="3" class="titre1">Niveau A - ADJ <button onclick="demcor()" style="line-height: 14px">Demander un engagement </button> </td> </tr> <tr class="titre2"> <td style="width: 25%">Emploi</td> <td style="width: 50%">Sujet</td> <td style="width: 25%">Corrigé</td> </tr> <tr> <td rowspan="22" class="td1"> ADA-1 </td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td class="td2"></td> <td class="td2"></td> </tr> <tr> <td rowspan="25" class="td1"> ADA-2 </td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td class="td2"></td> <td class="td2"></td> </tr> <tr> <td rowspan="1" class="td1">ADA-3</td> <td class="td2"></td> <td class="td2"></td> </tr> <tr> <td rowspan="7" class="td1">ADA-4</td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td class="td2"></td> <td class="td2"></td> </tr> <tr> <td rowspan="2" class="td1"> ADA-5 </td> <td></td> <td></td> </tr> <tr> <td class="td2"></td> <td class="td2"></td> </tr> <tr> <td rowspan="1" class="td1"> ADA-6 </td> <td class="td2"></td> <td class="td2"></td> </tr> <tr> <td rowspan="1" class="td1"> ADA-7 </td> <td class="td2"></td> <td class="td2"></td> </tr> </tbody> </table> <table id="boutB" class="table-corr"> <caption> Titre du tableau </caption> <thead> <tr> <td colspan="3">Niveau B - Assistant <button onclick="demcor()" style="line-height: 14px"> Demander un engagement </button> </td> </tr> <tr> <th style="width: 25%">Emploi</th> <th style="width: 50%">Sujet</th> <th style="width: 25%">Corrigé</th> </tr> </thead> <tbody> <tr> <td rowspan="1" class="td1"> AB-1 </td> <td class="td2"> </td> <td class="td2"></td> </tr> <tr> <td rowspan="10" class="td1"> AB-2 </td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td class="td2"></td> <td class="td2"></td> </tr> <tr> <td rowspan="4" class="td1"> AB-3 </td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td class="td2"></td> <td class="td2"></td> </tr> <tr> <td rowspan="1" class="td1"> AB-4 </td> <td class="td2"></td> <td class="td2"></td> </tr> <tr> <td rowspan="3" class="td1"> AB-5 </td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td class="td2"></td> <td class="td2"></td> </tr> <tr> <td rowspan="1" class="td1"> AB-6 </td> <td class="td2"></td> <td class="td2"></td> </tr> <tr> <td rowspan="2" class="td1"></td> <td></td> <td></td> </tr> <tr> <td class="td2"></td> <td class="td2"></td> </tr> <tr> <td rowspan="1" class="td1"> AB-7 </td> <td class="td2"></td> <td class="td2"></td> </tr> <tr> <td colspan="3" class="titre1">Niveau B - TECH <button onclick="demcor()" style="line-height: 14px">Demander un engagement </button> </td> </tr> <tr class="titre2"> <td style="width: 25%">Emploi-type</td> <td style="width: 50%">Annales</td> <td style="width: 25%">Corrigés</td> </tr> <tr> <td rowspan="23" class="td1">TB-1</td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td class="td2"></td> <td class="td2"></td> </tr> <tr> <td rowspan="14" class="td1"> TB-2 </td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td class="td2"></td> <td class="td2"></td> </tr> <tr> <td rowspan="7" class="td1">TB-3</td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td class="td2"></td> <td class="td2"></td> </tr> <tr> <td rowspan="13" class="td1"> TB-4 </td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td class="td2"></td> <td class="td2"></td> </tr> <tr> <td rowspan="10" class="td1"> TB-5 </td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td class="td2"></td> <td class="td2"></td> </tr> <tr> <td rowspan="5" class="td1"> TA-6 </td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></tdB <td></td> </tr> <tr> <td class="td2"></td> <td class="td2"></td> </tr> <tr> <td rowspan="3" class="td1"> TB-7 </td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td class="td2"></td> <td class="td2"></td> </tr> <tr> <td colspan="3" class="titre1">Niveau B - ADJ <button onclick="demcor()" style="line-height: 14px">Demander un engagement </button> </td> </tr> <tr class="titre2"> <td style="width: 25%">Emploi</td> <td style="width: 50%">Sujet</td> <td style="width: 25%">Corrigé</td> </tr> <tr> <td rowspan="22" class="td1"> ADB-1 </td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td class="td2"></td> <td class="td2"></td> </tr> <tr> <td rowspan="25" class="td1"> ADB-2 </td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td class="td2"></td> <td class="td2"></td> </tr> <tr> <td rowspan="1" class="td1">ADB-3</td> <td class="td2"></td> <td class="td2"></td> </tr> <tr> <td rowspan="7" class="td1">ADB-4</td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td class="td2"></td> <td class="td2"></td> </tr> <tr> <td rowspan="2" class="td1"> ADB-5 </td> <td></td> <td></td> </tr> <tr> <td class="td2"></td> <td class="td2"></td> </tr> <tr> <td rowspan="1" class="td1"> ADB-6 </td> <td class="td2"></td> <td class="td2"></td> </tr> <tr> <td rowspan="1" class="td1"> ADB-7 </td> <td class="td2"></td> <td class="td2"></td> </tr> </tbody> </table> </center> <script>function coula() { var x = document.getElementsByClassName("table-corr"); x[1].style.display = "none"; x[2].style.display = "none"; x[3].style.display = "none"; x[4].style.display = "none"; x[5].style.display = "none"; x[6].style.display = "none"; x[7].style.display = "none"; document.getElementById('boutA').style.display="block"; } </script> <script>function coulb() { var x = document.getElementsByClassName("table-corr"); x[0].style.display = "none"; x[2].style.display = "none"; x[3].style.display = "none"; x[4].style.display = "none"; x[5].style.display = "none"; x[6].style.display = "none"; x[7].style.display = "none"; document.getElementById('boutB').style.display="block"; } </script> <script>function coulc() { var x = document.getElementsByClassName("table-corr"); x[0].style.display = "none"; x[1].style.display = "none"; x[3].style.display = "none"; x[4].style.display = "none"; x[5].style.display = "none"; x[6].style.display = "none"; x[7].style.display = "none"; document.getElementById('boutC').style.display="block"; } </script> <script>function could() { var x = document.getElementsByClassName("table-corr"); x[0].style.display = "none"; x[1].style.display = "none"; x[2].style.display = "none"; x[4].style.display = "none"; x[5].style.display = "none"; x[6].style.display = "none"; x[7].style.display = "none"; document.getElementById('boutD').style.display="block"; } </script> <script>function coule() { var x = document.getElementsByClassName("table-corr"); x[0].style.display = "none"; x[1].style.display = "none"; x[2].style.display = "none"; x[3].style.display = "none"; x[5].style.display = "none"; x[6].style.display = "none"; x[7].style.display = "none"; document.getElementById('boutE').style.display="block"; } </script> <script>function coulf() { var x = document.getElementsByClassName("table-corr"); x[0].style.display = "none"; x[1].style.display = "none"; x[2].style.display = "none"; x[3].style.display = "none"; x[4].style.display = "none"; x[6].style.display = "none"; x[7].style.display = "none"; document.getElementById('boutF').style.display="block"; } </script> <script>function coulg() { var x = document.getElementsByClassName("table-corr"); x[0].style.display = "none"; x[1].style.display = "none"; x[2].style.display = "none"; x[3].style.display = "none"; x[4].style.display = "none"; x[5].style.display = "none"; x[7].style.display = "none"; document.getElementById('boutG').style.display="block"; } </script> <script>function coulj() { var x = document.getElementsByClassName("table-corr"); x[0].style.display = "none"; x[1].style.display = "none"; x[2].style.display = "none"; x[3].style.display = "none"; x[4].style.display = "none"; x[5].style.display = "none"; x[6].style.display = "none"; document.getElementById('boutJ').style.display="block"; } </script> </html>

Ce que je veux

Par défaut, aucun tableau ne doit être affiché : seuls les boutons doivent être présents.
Si je clique sur le bouton A, j'aimerais que le tableau identifié boutA s'affiche ; si je clique sur B alors je veux l'affichage du tableau boutB.

Ce que j'obtiens
Actuellement, par défaut, tous les tableaux sont affichés. Lorsque je clique sur un bouton, aucun tableau ne s'affiche.

Merci d'avance pour l'aide

4 réponses

nlbmoi, il y a 2 ans

Re,

J'ai dégrossi pour ne prendre en compte que 2 tableaux : désormais, en cliquant sur le bouton, j'ai bien accès au bon tableau.
Par contre, il subsiste le problème des tableaux qui apparaissent au départ.

J'ai également un autre problème qui est apparu : à l'affichage initial (que je ne souhaite pas !), les tableaux sont correctement affichés par contre quand je clique sur un des bouton, le tableau s'affiche mais la mise en forme est modifiée :

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <style> .bout { border: 1px solid #00b3cd; width: 30px; height: 30px; text-align: center; float: left; margin-right: 5px; border-radius: 10px; background-color: #cef6f5; } .bout:hover { background-color: #2e64fe; } .table-corr { --border-coul: #a3a3a3; width: 90%; margin: auto; border: 10px solid green; border-collapse: collapse; text-align: center; font-family: arial; font-size: 0.9em; line-height: 1.05; table-layout: fixed; } .td1 { border-right: 2px solid yellow; border-bottom: 3px solid brown; } .td2 { border-bottom: 3px solid brown; } /* navbar */ .navbar { overflow: hidden; background-color: transparent; width: max-content; margin: 0 auto; height: 52px; } .navbar span { font-size: 16px; color: white; text-align: center; padding: 14px 16px; text-decoration: none; display: inline-block; width: inherit; padding: 10px 0px; } .subnav { overflow: hidden; display: inline-block; width: 70px; } .desactive { display: none !important; } .subnav:hover .subnav-content { display: block; } </style> </head> <center> <div style="max-width:630px;background-color:#EFFBFB;">Test de ma page. <h4>Sélectionner votre niveau</h4> <div class="navbar"> <div class="subnav"> <button class="bout" onclick="coula()">A</button> </div> <div class="subnav"> <button class="bout" onclick="coulb()">B</button> </div> </div> <table id="boutA" class="table-corr"> <caption> Titre du tableau </caption> <thead> <tr> <td colspan="3">Niveau A - Assistant <button onclick="demcor()" style="line-height: 14px"> Demander un engagement </button> </td> </tr> <tr> <th style="width: 25%">Emploi</th> <th style="width: 50%">Sujet</th> <th style="width: 25%">Corrigé</th> </tr> </thead> <tbody> <tr> <td class="td1"> AA-1 </td> <td class="td2"> </td> <td class="td2"></td> </tr> <tr> <td class="td1"> AA-2 </td> <td></td> <td></td> </tr> </tbody> </table> <table id="boutB" class="table-corr"> <caption> Titre du tableau </caption> <thead> <tr> <td colspan="3">Niveau B - Assistant <button onclick="demcor()" style="line-height: 14px"> Demander un engagement </button> </td> </tr> <tr> <th style="width: 25%">Emploi</th> <th style="width: 50%">Sujet</th> <th style="width: 25%">Corrigé</th> </tr> </thead> <tbody> <tr> <td class="td1"> AB-1 </td> <td class="td2"> </td> <td class="td2"></td> </tr> <tr> <td class="td1"> AB-2 </td> <td></td> <td></td> </tr> </tbody> </table> </center> </div> <script>function coula() { var x = document.getElementsByClassName("table-corr"); x[1].style.display = "none"; document.getElementById('boutA').style.display="block"; } </script> <script>function coulb() { var x = document.getElementsByClassName("table-corr"); x[0].style.display = "none"; document.getElementById('boutB').style.display="block"; } </script> </html>
nlbmoi, il y a 2 ans

ah bon ? Quelle ligne ?

nlbmoi, il y a 2 ans

Ah merci pour ton aide.

As-tu une idée pour le fait que la mise en forme ne soit pas respectée (en gros, mon tableau "utile" prend la moitié de la bordure de table-corr ; l'autre moitié étant vide)

nlbmoi, il y a 2 ans

Merci beaucoup : cela fonctionne nickel !