Sujet Précédent Sujet Suivant

Ajout de boutons dépendant d'autres boutons (en cascade)

nlbmoi Messages postés 434 Date d'inscription samedi 26 août 2006 Statut Membre Dernière intervention 3 décembre 2023 - 3 déc. 2023 à 19:49
jordane45 Messages postés 38296 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 19 novembre 2024 - 4 déc. 2023 à 21:56

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>

2 réponses

Réponse 1 / 2
jordane45 Messages postés 38296 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 19 novembre 2024 4 704
4 déc. 2023 à 09:48

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.
0
Réponse 2 / 2
mariam-j Messages postés 1347 Date d'inscription mercredi 9 mars 2022 Statut Membre Dernière intervention 19 novembre 2024 11
Modifié le 4 déc. 2023 à 10:29

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.
-1
jordane45 Messages postés 38296 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 19 novembre 2024 4 704
4 déc. 2023 à 15:52

mais bien sûr...  et tu dupliques du code html pour rien ..; sans compter qu'il faudra prévoir tous les cas possibles....

En gros tu lui proposes de coder comme dans les années 90 .....

0
mariam-j Messages postés 1347 Date d'inscription mercredi 9 mars 2022 Statut Membre Dernière intervention 19 novembre 2024 11 > jordane45 Messages postés 38296 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 19 novembre 2024
4 déc. 2023 à 16:21

Ce serait plus rapide que d'apprendre le JS.

Dupliquer n'est pas déshonorant.

-1
jordane45 Messages postés 38296 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 19 novembre 2024 4 704 > mariam-j Messages postés 1347 Date d'inscription mercredi 9 mars 2022 Statut Membre Dernière intervention 19 novembre 2024
Modifié le 4 déc. 2023 à 23:52

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 ==

0

Discussions similaires

Qui sont les personnes dans mon ajout rapide de Snapchat ?
lobino68 -
m_manolo25 -

21 réponses
Comment savoir comment on nous a ajouté sur Snap
Laura -
Lob6 -

15 réponses
Pourquoi des inconnus bizarres m'ajoutent sur snap ?
FrelX_ -
Leo -

1 réponse
Ajout rapide snap
Bobo -
Utilisateur anonyme -

1 réponse
Limite de demande d’amis Snapchat comment faire ?
Tom -
a.privaxx54 -

2 réponses