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
10 réponses
Je suis pas assez calé en CSS pour te dire pourquoi mais ça semble lié au display:block, la solution sinon c'est de le retirer et d'écrire tes fonctions comme ça :
<script>
function coula() {
document.getElementById('boutA').style.display="";
document.getElementById('boutB').style.display="none";
}
</script>
<script>
function coulb() {
document.getElementById('boutA').style.display="none";
document.getElementById('boutB').style.display="";
}
</script>Essaye d'isoler le problème ou de synthétiser un minimum, bref pense à faciliter un minimum la tâche aux personnes qui voudront te lire ou t'aider...
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>
Effectivement c'est plus clair comme ça ! :)
C'est normal que tes tableaux apparaissent par défaut, ils sont dans ton html avec une classe par défaut qui les rend visibles.
Il y a surement moyen de faire mieux mais en gros tu peux mettre tes tableaux en display : none par défaut dans le html :
<table id="boutA" class="table-corr" style="display: none;">Ensuite pour faire apparaître l'un ou l'autre tabelau :
<script>
function coula() {
document.getElementById('boutA').style.display="block";
document.getElementById('boutB').style.display="none";
}
</script>
<script>
function coulb() {
document.getElementById('boutA').style.display="none";
document.getElementById('boutB').style.display="block";
}
</script>Bah ils ont la classe "table-corr" avec des éléments css visibles donc ils s'affichent au lancement de la page, le display:none intervient seulement après le clic sur un bouton avec le code que tu as écrit.
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)