Afficher les lignes d'un tableau d'aprés une liste déroulante
Résolu/Fermé
Djazz-yeah
Messages postés
13
Date d'inscription
lundi 22 février 2016
Statut
Membre
Dernière intervention
25 février 2016
-
Modifié par Djazz-yeah le 22/02/2016 à 22:42
jordane45 Messages postés 38109 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 28 mars 2024 - 25 févr. 2016 à 15:53
jordane45 Messages postés 38109 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 28 mars 2024 - 25 févr. 2016 à 15:53
A voir également:
- Afficher un tableau en fonction d'une liste déroulante excel
- Liste déroulante excel - Guide
- Tableau croisé dynamique - Guide
- Excel liste déroulante en cascade - Guide
- Excel fonction si et - Guide
- Tableau ascii - Guide
4 réponses
jordane45
Messages postés
38109
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
28 mars 2024
4 634
22 févr. 2016 à 22:46
22 févr. 2016 à 22:46
Bonjour
sans voir ce que tu as commencé à coder.... IMPOSSIBLE de t'aider!
sans voir ce que tu as commencé à coder.... IMPOSSIBLE de t'aider!
Djazz-yeah
Messages postés
13
Date d'inscription
lundi 22 février 2016
Statut
Membre
Dernière intervention
25 février 2016
24 févr. 2016 à 00:02
24 févr. 2016 à 00:02
Bonsoir Jordane45 :)
alors voilà je viens d'essayer avec la fonction "document.getElementById("myDIV").style.display = "none" sans pour autant mettre une boucle pour chaque <TR>, cependant j'ai donné un id à la balise t
<tbody>, maintenant quand je clique sur le bouton afficher, le corp du tableau disparaît (c'est déjà un progrès ) mais je n'arrive pas encore à relier les éléments de la liste déroulante avec le contenu à afficher, help please
alors voilà je viens d'essayer avec la fonction "document.getElementById("myDIV").style.display = "none" sans pour autant mettre une boucle pour chaque <TR>, cependant j'ai donné un id à la balise t
<tbody>, maintenant quand je clique sur le bouton afficher, le corp du tableau disparaît (c'est déjà un progrès ) mais je n'arrive pas encore à relier les éléments de la liste déroulante avec le contenu à afficher, help please
<form style="text-align: center;"> <select name="nom" onchange="go(this.value);"> <option selected="selected" style="text-align: center;" value="">------Select an Option------ </option> <option value="id0"> Sales techniques </option> <option value="id1">Merchandising </option> <option value="id2">Distribution </option> <option value="id3">Team Management </option> <option value="id4"> New! Business English for Professionals </option> <option value="id5">Marketing Management </option> <option value="id6">Brand Management </option> </select> </form> <br> <p style="text-align: center;"><button onclick="myFunction()"> Select </button> <p> <script type="text/javascript"> function myFunction() { document.getElementById("tbody").style.display ="none"; } </script> <tbody id="tbody" align="left"> </tbody >
jordane45
Messages postés
38109
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
28 mars 2024
4 634
24 févr. 2016 à 00:18
24 févr. 2016 à 00:18
1 - Que fais, dans le code que tu nous montres, cette ligne tbody
2 - Si tu masques le Tbody ... ça masque TOUTES les lignes ... mais.. tu ne pourras pas, de cette manière.. afficher ensuite que la ligne qui t’intéresse.
Tu dois donc OBLIGATOIREMENT masquer CHAQUE LIGNE (les TR) via une boucle.
3 - Pourquoi vouloir mettre un bouton... alors que je t'avais mis un ONCHANGE dans le SELECT directement ?
Si tu veux que je t'aide à coder ta fonction ...
commence par attribuer un ID à chaque TR de ton tableau ( bien entendu.. tu utilises les mêmes ID que les VALUE que tu as mis dans ta liste déroulante..
Pour ce qui est de la boucle pour masquer toutes les lignes contenues dans le Tbody de ton tableau,
tu peux utliser :
<tbody id="tbody" align="left"> </tbody >toute seule ? ( c'est à dire... sans le tableau HTML sensé la contenir ??? )
2 - Si tu masques le Tbody ... ça masque TOUTES les lignes ... mais.. tu ne pourras pas, de cette manière.. afficher ensuite que la ligne qui t’intéresse.
Tu dois donc OBLIGATOIREMENT masquer CHAQUE LIGNE (les TR) via une boucle.
3 - Pourquoi vouloir mettre un bouton... alors que je t'avais mis un ONCHANGE dans le SELECT directement ?
Si tu veux que je t'aide à coder ta fonction ...
commence par attribuer un ID à chaque TR de ton tableau ( bien entendu.. tu utilises les mêmes ID que les VALUE que tu as mis dans ta liste déroulante..
Pour ce qui est de la boucle pour masquer toutes les lignes contenues dans le Tbody de ton tableau,
tu peux utliser :
//On masque toutes les lignes contenues dans le Tbody var tr = document.getElementById('tbody').rows; for (var i = 0; i < tr.length; ++i) { tr[i].style.display ='none'; }
Djazz-yeah
Messages postés
13
Date d'inscription
lundi 22 février 2016
Statut
Membre
Dernière intervention
25 février 2016
24 févr. 2016 à 19:54
24 févr. 2016 à 19:54
Bonjour Jordane45
pour le tbody, je l'ai mentionné juste pour montrer le id, quant au reste du tableau est mentionné dans mon 2 ème post.
pour les tr je les ai identifiés bien sûr mais pour aller plus vite j'ai pensé qu'on pourrait cacher tout le body puis afficher les tr concernées ci-dessous
Je viens de modifier le code et ça marche bien avec la boucle (tout le body disparaît )
les tr:
J'ai supprimé les td pour ne pas alourdir le code
pour le tbody, je l'ai mentionné juste pour montrer le id, quant au reste du tableau est mentionné dans mon 2 ème post.
pour les tr je les ai identifiés bien sûr mais pour aller plus vite j'ai pensé qu'on pourrait cacher tout le body puis afficher les tr concernées ci-dessous
Je viens de modifier le code et ça marche bien avec la boucle (tout le body disparaît )
les tr:
<table style="background-color: rgb(251, 250, 250);" ;="" class="tb1" border="1" cellpadding="1" cellspacing="1"> <thead align="left"> <tr> <th style="width: 20%;">Module Title</th> <th style="width: 35%;">Target audience </th> <th style="width: 30%;">Competencies</th> <th style="width: 15%;">Documentation</th> </tr> </thead> <tbody id="tbody" align="left"> <tr value="id0"> </tr> <tr value="id1"> </tr> <tr value="id2"> </tr> <tr value="id3"> </tr> <tr value="id4"> </tr> <tr value="id5"> </tr> <tr value="id6"> </tr> </tbody> </table>
J'ai supprimé les td pour ne pas alourdir le code
jordane45
Messages postés
38109
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
28 mars 2024
4 634
>
Djazz-yeah
Messages postés
13
Date d'inscription
lundi 22 février 2016
Statut
Membre
Dernière intervention
25 février 2016
24 févr. 2016 à 23:15
24 févr. 2016 à 23:15
Très bien.
Donc ne te reste plus qu'a afficher LA ligne selectionnée..
Donc ne te reste plus qu'a afficher LA ligne selectionnée..
Djazz-yeah
Messages postés
13
Date d'inscription
lundi 22 février 2016
Statut
Membre
Dernière intervention
25 février 2016
24 févr. 2016 à 23:18
24 févr. 2016 à 23:18
Et en plus clair? lol
jordane45
Messages postés
38109
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
28 mars 2024
4 634
>
Djazz-yeah
Messages postés
13
Date d'inscription
lundi 22 février 2016
Statut
Membre
Dernière intervention
25 février 2016
24 févr. 2016 à 23:24
24 févr. 2016 à 23:24
Ben le but de ton code c'est quoi ? (sachant que c'est toi qui es venu poser la question......)
C'est : << Afficher LA ligne correspondante à la liste déroulante >>
Donc.. maintenant que tu es en mesure de masquer toutes les lignes du tableau via mon code ... il ne te reste plus qu'a réafficher LA ligne correspondante au choix de la liste déroulante (le SELECT).
C'est : << Afficher LA ligne correspondante à la liste déroulante >>
Donc.. maintenant que tu es en mesure de masquer toutes les lignes du tableau via mon code ... il ne te reste plus qu'a réafficher LA ligne correspondante au choix de la liste déroulante (le SELECT).
Djazz-yeah
Messages postés
13
Date d'inscription
lundi 22 février 2016
Statut
Membre
Dernière intervention
25 février 2016
Modifié par jordane45 le 25/02/2016 à 15:25
Modifié par jordane45 le 25/02/2016 à 15:25
Bonjour
voilà :)
le code js
voilà :)
<!DOCTYPE html PUBLIC "-//W<gras>3C//DTD HTML 4.01 Transitional//EN"> <html> <head> </head> <body style="background-image: url (/img/ggg.jpg);"> <select name="nom" id="select" onchange="myFunction(this.value);"> <option selected="selected" style="text-align: center;" value="">------Select an Option------ </option> <option value="id0"> Sales techniques </option> <option value="id1">Merchandising </option> <option value="id2">Distribution </option> <option value="id3">Team Management </option> <option value="id4"> New! Business English for Professionals </option> <option value="id5">Marketing Management </option> <option value="id6">Brand Management </option> </select> </form> <script type="text/javascript"> //On masque toutes les lignes contenues dans le Tbody function myFunction() { var tr = document.getElementById("tbody").rows; for (var i = 0; i < tr.length; ++i) //ici on met le code pour afficher la ligne // dont l' ID= celui du VALUE du select { tr[i].style.display =""; } { for (var i = 0; i < tr.length; ++i) { document.getElementById(id_de_la_ligne_a_afficher).style.display =""; } } </script> <table style="background-color: rgb(251, 250, 250);" ;="" class="tb1" border="1" cellpadding="1" cellspacing="1"> <thead align="left"> <tr> <th style="width: 20%;">Module Title</th> <th style="width: 35%;">Target audience </th> <th style="width: 30%;">Competencies</th> <th style="width: 15%;">Documentation</th> </tr> </thead> <tbody id="tbody" align="left"> <tr value="id0"> </tr> <tr value="id1"> </tr> <tr value="id2"> </tr> <tr value="id3"> </tr> <tr value="id4"> </tr> <tr value="id5"> </tr> <tr value="id6"> </tr> </tbody> </table> </p> </body> </html>
le code js
<script type="text/javascript"> //On masque toutes les lignes contenues dans le Tbody function myFunction() { var tr = document.getElementById("tbody").rows; for (var i = 0; i < tr.length; ++i) //ici on met le code pour afficher la ligne // dont l' ID= celui du VALUE du select { tr[i].style.display =""; } { for (var i = 0; i < tr.length; ++i) { document.getElementById(id_de_la_ligne_a_afficher).style.display =""; } } </script>
jordane45
Messages postés
38109
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
28 mars 2024
4 634
25 févr. 2016 à 15:37
25 févr. 2016 à 15:37
Bon....
A la place de mettre des ID à tes TR ... tu as mis des VALUE !! (value.. n'étant pas un attribut valide pour un tr de toutes façons !!!! )
Bref...
Voici le code corrigé et fonctionnel :
A la place de mettre des ID à tes TR ... tu as mis des VALUE !! (value.. n'étant pas un attribut valide pour un tr de toutes façons !!!! )
Bref...
Voici le code corrigé et fonctionnel :
<!DOCTYPE html> <html> <head> </head> <body style="background-image: url(/img/ggg.jpg);"> <select name="nom" id="select" onchange="myFunction(this.value);"> <option selected="selected" style="text-align: center;" value="">------Select an Option------ </option> <option value="id0"> Sales techniques </option> <option value="id1">Merchandising </option> <option value="id2">Distribution </option> <option value="id3">Team Management </option> <option value="id4"> New! Business English for Professionals </option> <option value="id5">Marketing Management </option> <option value="id6">Brand Management </option> </select> <table style="background-color: rgb(251, 250, 250);" ;="" class="tb1" border="1" cellpadding="1" cellspacing="1"> <thead align="left"> <tr> <th style="width: 20%;">Module Title</th> <th style="width: 35%;">Target audience </th> <th style="width: 30%;">Competencies</th> <th style="width: 15%;">Documentation</th> </tr> </thead> <tbody id="tbody" align="left"> <tr id="id0"> <td>Ligne id0</td> <td>zzz</td> <td>aaaa</td> <td>xxxx</td> </tr> <tr id="id1"> <td>Ligne id1</td> <td>zzz</td> <td>aaaa</td> <td>xxxx</td> </tr> <tr id="id2"> </tr> <tr id="id3"> </tr> <tr id="id4"> </tr> <tr id="id5"> </tr> <tr id="id6"> </tr> </tbody> </table> </p> </body> </html> <script type="text/javascript"> function myFunction(id_de_la_ligne_a_afficher) { var tr = document.getElementById("tbody").rows; //On masque toutes les lignes => display ='none' for (var i = 0; i < tr.length; ++i) { tr[i].style.display ="none"; } //On affiche la ligne qui nous interesse var TRTODISPLAY = document.getElementById(id_de_la_ligne_a_afficher); // Je m'assure que la ligne existe avant d'essayer de l'afficher if(typeof(TRTODISPLAY)!='undefined' && TRTODISPLAY!=null){ //Affichage de la ligne TRTODISPLAY.style.display =""; } } </script>
Djazz-yeah
Messages postés
13
Date d'inscription
lundi 22 février 2016
Statut
Membre
Dernière intervention
25 février 2016
25 févr. 2016 à 15:52
25 févr. 2016 à 15:52
ça marche super bien merciiiiii Jordane T un amour :))))))))))
jordane45
Messages postés
38109
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
28 mars 2024
4 634
>
Djazz-yeah
Messages postés
13
Date d'inscription
lundi 22 février 2016
Statut
Membre
Dernière intervention
25 février 2016
25 févr. 2016 à 15:53
25 févr. 2016 à 15:53
Si la question est résolue..
Merci de ne pas oublier de clôturer le sujet
(en cliquant sur le lien "Marquer comme résolu" qui se trouve sous le titre de la question)
Cordialement,
Jordane
Merci de ne pas oublier de clôturer le sujet
(en cliquant sur le lien "Marquer comme résolu" qui se trouve sous le titre de la question)
Cordialement,
Jordane
22 févr. 2016 à 22:58
le tableau
jusqu'à la dernière ligne du tableau .
voilà, merci d'avance :)
22 févr. 2016 à 23:07
Quand tu dis :
Tu veux dire masquer les autres lignes de ton tableau pour ne garder que celle correspondant à ton choix ?
Si tel est le cas....
Commence par mettre des ID à tes TR.
Ensuite, utilises du javascript ... en ajoutant un ONCHANGE sur ton SELECT qui affiche/masque les lignes de ton tableau
=> pour afficher masquer... utiliser le style DISPLAY.
22 févr. 2016 à 23:31
Oui, effectivement je veux masquer toutes les lignes et n'afficher que la ligne correspondante à la formation sélectionnée.
Si on admets que les id sont id1, id2, id3 et id4
pouvez vous me donner exactement le code à utiliser si possible avec un bouton "go"?
PS non, les données ne sont pas stockées dans des variables , mais elles sont présentées dans le tableau.
Merci encore
22 févr. 2016 à 23:38
Je pourrais ....... mais je préférai que tu trouves par toi même (avec mon aide...)
Donc voici de quoi commencer :
https://www.w3schools.com/jsref/prop_style_display.asp
https://stackoverflow.com/questions/3065342/how-do-i-iterate-through-table-rows-and-cells-in-javascript
22 févr. 2016 à 23:49
Je vais essayer ça et vous tenir au courant du résultat :)
après une Bonne documentation sur les 2 liens :P