Ajout de boutons dépendant d'autres boutons (en cascade)
nlbmoi
Messages postés
434
Date d'inscription
Statut
Membre
Dernière intervention
-
jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention -
jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention -
Bonjour,
J'apprends un peu sur le tard le html pour un site.
En particulier, j'ai réussi à modifier un code précédent, qui fonctionne mais sans doute reste (très) perfectible : je suis d'ailleurs ouvert à toute amélioration !
Dans le code ci-dessous, l'utilisateur sélectionne 1 poule (A;B; C ...) qui donne accès aux poules correspondantes. J'aimerais ajouter un 2ème niveau de choix par l'ajout d'une ligne de boutons en-dessous des premiers pour choisir une "sous-poule" qui dépend du premier choix (par exemple, si je choisis A, j'aimerais qu'apparaisse les choix possibles 1, 2 et 3 ; si je choisis B alors j'aimerais que s'affiche 1 ou 2) qui affiche le tableau correspondant (actuellement, j'ai un seul tableau qui regroupe toutes les poules).
Merci d'avance pour votre aide.
Mon code actuel :
<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;}.td1 {text-align:center;font-family:arial;font-size:1.2em;font-weight:bold;border: 1px solid black;line-height:1.2;}.td2 {border: 1px solid black;font-size:1.2em;text-align:center;line-height:1.5em;}.td3 {border: 1px solid black;font-size:1.1em;text-align:center;line-height:1.5em;}.td4 {border: 1px solid black;font-size:1.1em;text-align:center;line-height:1.5em;font-weight:bold;}</style>
<center>
</div>
<h4 style="text-align:center;">Sélectionner votre niveau</h4>
<div style="max-width:300px;"><button class="bout" onclick="coula()">A</button><button class="bout" onclick="coulb()">B</button><button class="bout" onclick="coulc()">C</button><button class="bout" onclick="could()">D</button><button class="bout" onclick="coule()">E</button><button class="bout" onclick="coulf()">F</button><button class="bout" onclick="coulg()">G</button><button class="bout" onclick="coulj()">J</button></div>
<table id="boutA" class="corx" style="display:none;border: 1px solid black;border-collapse: collapse;">
<tbody>
<tr>
<td colspan="3" class="td1" style="width:530px;background-color:#CEF6F5;">A - 1 - Equipes disponibles <button onclick="demcor()" style="line-height:14px;">Demander un engagement</button></td>
</tr>
<tr>
<td class="td2" style="width:35%;color:blue;font-weight:bold;">Poule</td>
<td class="td2" style="width:35%;color:blue;font-weight:bold;">Nom club</td>
<td class="td2" style="width:30%;color:blue;font-weight:bold;">Numéro équipe</td>
</tr>
<tr>
<td class="td3">Poule A-1-1
</td>
<td class="td3">
</td>
<td class="td3">
</td>
<td class="td4">
</td>
</tr>
<tr>
<td class="td3">Poule A-1-2
</td>
<td class="td3">
</td>
<td class="td3">
</td>
<td class="td4">
</td>
</tr>
<tr>
<td class="td3">Poule A-1-3
</td>
<td class="td3">
</td>
<td class="td3">
</td>
<td class="td4">
</td>
</tr>
<tr>
<td colspan="3" class="td1" style="width:530px;background-color:#CEF6F5;">A - 2 - Equipes disponibles <button onclick="demcor()" style="line-height:14px;">Demander un engagement</button></td>
</tr>
<tr>
<td class="td2" style="width:35%;color:blue;font-weight:bold;">Poule</td>
<td class="td2" style="width:35%;color:blue;font-weight:bold;">Nom club</td>
<td class="td2" style="width:30%;color:blue;font-weight:bold;">Numéro équipe</td>
</tr>
<td class="td3">Poule A-2-1</td>
<td class="td3"></td>
<td class="td4">
</td>
</tr>
<tr>
<td class="td3">Poule A-2-2
</td>
<td class="td3">
</td>
<td class="td4">
</td>
</tr>
<tr>
<td colspan="3" class="td1" style="width:530px;background-color:#CEF6F5;">A - 3 - Equipes disponibles <button onclick="demcor()" style="line-height:14px;">Demander un engagement</button></td>
</tr>
<tr>
<td class="td2" style="width:35%;color:blue;font-weight:bold;">Poule</td>
<td class="td2" style="width:35%;color:blue;font-weight:bold;">Nom club</td>
<td class="td2" style="width:30%;color:blue;font-weight:bold;">Numéro équipe</td>
</tr>
<td class="td3">Poule A-3-1</td>
<td class="td3"></td>
<td class="td4">
</td>
</tr>
<tr>
<td class="td3">Poule A-3-2
</td>
<td class="td3">
</td>
<td class="td4">
</td>
</tr>
</tbody>
</table>
<table id="boutB" class="corx" style="display:none;border: 1px solid black;border-collapse: collapse;">
<tbody>
<tr>
<td colspan="3" class="td1" style="width:530px;background-color:#CEF6F5;">B - 1 - Equipes disponibles <button onclick="demcor()" style="line-height:14px;">Demander un engagement</button></td>
</tr>
<tr>
<td class="td2" style="width:35%;color:blue;font-weight:bold;">Poule</td>
<td class="td2" style="width:35%;color:blue;font-weight:bold;">Nom club</td>
<td class="td2" style="width:30%;color:blue;font-weight:bold;">Numéro équipe</td>
</tr>
<tr>
<td class="td3">Poule B-1-1
</td>
<td class="td3">
</td>
<td class="td3">
</td>
<td class="td4">
</td>
</tr>
<tr>
<td class="td3">Poule B-1-2
</td>
<td class="td3">
</td>
<td class="td3">
</td>
<td class="td4">
</td>
</tr>
<tr>
<td class="td3">Poule B-1-3
</td>
<td class="td3">
</td>
<td class="td3">
</td>
<td class="td4">
</td>
</tr>
<tr>
<td colspan="3" class="td1" style="width:530px;background-color:#CEF6F5;">B - 2 - Equipes disponibles <button onclick="demcor()" style="line-height:14px;">Demander un engagement</button></td>
</tr>
<tr>
<td class="td2" style="width:35%;color:blue;font-weight:bold;">Poule</td>
<td class="td2" style="width:35%;color:blue;font-weight:bold;">Nom club</td>
<td class="td2" style="width:30%;color:blue;font-weight:bold;">Numéro équipe</td>
</tr>
<td class="td3">Poule B-2-1</td>
<td class="td3"></td>
<td class="td4">
</td>
</tr>
<tr>
<td class="td3">Poule B-2-2
</td>
<td class="td3">
</td>
<td class="td4">
</td>
</tr>
<tr>
<td colspan="3" class="td1" style="width:530px;background-color:#CEF6F5;">B - 3 - Equipes disponibles <button onclick="demcor()" style="line-height:14px;">Demander un engagement</button></td>
</tr>
<tr>
<td class="td2" style="width:35%;color:blue;font-weight:bold;">Poule</td>
<td class="td2" style="width:35%;color:blue;font-weight:bold;">Nom club</td>
<td class="td2" style="width:30%;color:blue;font-weight:bold;">Numéro équipe</td>
</tr>
<td class="td3">Poule B-3-1</td>
<td class="td3"></td>
<td class="td4">
</td>
</tr>
<tr>
<td class="td3">Poule B-3-2
</td>
<td class="td3">
</td>
<td class="td4">
</td>
</tr>
</tbody>
</table>
<table id="boutC" class="corx" style="display:none;border: 1px solid black;border-collapse: collapse;">
<tbody>
</tbody>
</table>
<div id="boutD" class="corx" style="display:none;">Pas d'équipe.</div>
<div id="boutE" class="corx" style="display:none;">Pas d'équipe.</div>
<table id="boutF" class="corx" style="display:none;border: 1px solid black;border-collapse: collapse;">
<tbody>
</tbody>
</table>
<div id="boutG" class="corx" style="display:none;">Pas d'équipe.</div>
<div id="boutJ" class="corx" style="display:none;">Pas d'équipe.</div>
</center>
<script>function coula() {var x = document.getElementsByClassName("corx");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("corx");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("corx");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("corx");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("corx");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("corx");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("corx");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("corx");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>
<script>function coulasi() {var x = document.getElementsByClassName("corx");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('boutASI').style.display="block";}</script>
<script>function banque() {window.open("https:/monsite.fr");}</script>
<script>function demcor() {window.open("https://www.engagement");}</script>
A voir également:
- Ajout de boutons dépendant d'autres boutons (en cascade)
- Liste déroulante en cascade - Guide
- A quoi servent les boutons de couleur sur une telecommande - Guide
- Comment réinitialiser un téléphone avec les boutons - Guide
- Application pour reconnaître les boutons - Accueil - Outils
- Comment déverrouiller un samsung avec les boutons - Guide
2 réponses
Bonjour,
Comme tu as pu le voir, j'ai déplacé ta question dans le forum Javascript ( le html n'étant pas un langage de programmation et ne permettant pas, à lui seul, de réaliser ce que tu demandes).
Donc, pour en revenir à ton besoin...
Tout comme tu l'as fait pour tes couleurs... il va te falloir coder en JS.
Tu pourras trouver de très nombreux exemples/tutos sur le net sur les listes liées en JS ....
N'hésites pas à les tester ... et à revenir nous voir avec le code tenté si tu n'y arrives pas.
Bonjour,
Pourquoi ne pas faire simplement avec des liens, qui renverront à d'autre pages html,qui contiendront d'autres liens, et ainsi de suite.
Ce qui t'éviterait le JS.
A mon avis... Prendre 5 minutes pour rechercher sur Google des exemples comment réaliser des listes liées en javascript sera toujours plus rapide que dupliquer du code HTML et d'essayer de prévoir tous les cas possibles...
La programmation n'est visiblement pas un domaine que tu maîtrises. C'est très charitable de ta part de vouloir aider, mais parfois il faut essayer de prendre les bonnes décisions et de communiquer les bons conseils...
== https://www.google.com/search?q=javascript+listes+li%C3%A9es ==
