Afficher les lignes d'un tableau d'aprés une liste déroulante

Résolu

Djazz-yeah Messages postés 13 Date d'inscription Statut Membre Dernière intervention -
jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention - 25 févr. 2016 à 15:53

Bonjour à tous.
J'ai créé en HTML une liste déroulante de choix, et plus bas un tableau contenant des lignes des colonnes. Maintenant je souhaiterais, à partir de la liste déroulante, afficher toute les informations relatives au choix.

Je m'explique : ma liste affiche une liste de formmàtions voudrais, après avoir choisi une option dans la liste déroulante , avoir dans le tableau la ligne qui lui correspond.

les colonnes du tableau sont (titre de la formation- objecrifs- prerequis et documentation ) et si on selectionne rien, la totalité des lignes s'affichent.
j'ai fait ceci sans base de données, les données du tablrau sont en html
merci d'avance pour votre aide émoticône smile

Afficher la suite

A voir également:

Afficher un tableau en fonction d'une liste déroulante excel
Liste déroulante excel - Guide
Excel liste déroulante en cascade - Guide
Trier un tableau excel - Guide
Tableau word - Guide
Comment imprimer un tableau excel sur une seule page - Guide

4 réponses

Réponse 1 / 4

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

Bonjour
sans voir ce que tu as commencé à coder.... IMPOSSIBLE de t'aider!

Djazz-yeah Messages postés 13 Date d'inscription Statut Membre Dernière intervention

là liste de choix:

 <form style="text-align: center;">
  <select name="nom">
  <option selected="selected" style="text-align: center;">
------Select an Option------ </option>
  <option> Sales techniques </option>
  <option>Merchandising </option>
  <option>Distribution </option>
  <option>Team Management </option>
  <option> New! Business English for Professionals </option>
  <option>Marketing Management </option>
  <option>Brand Management </option>
  </select>

</form>

le tableau

 <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 align="left">

    <tr ="">

      <td style="background-color: rgb(235, 238, 239);">
      <h5><span style="font-weight: bold; font-family: Arial;">Sales
techniques </span></h5>

      </td>

      <td style="text-align: left; background-color: rgb(235, 238, 239);" vertical-align="" middle="" ;=""><span style="font-size: 10pt; font-family: Arial;">Human Resources
managers, team managers, managing directors, senior executives. <br>

      </span> </td>

      <td style="background-color: rgb(235, 238, 239);"><span style="font-size: 10pt;"><br>

Team management, human resources management, leadership skills <br>

   

      </span></td>

      <td style="background-color: rgb(235, 238, 239); text-align: center;"><a href="/pdf/IMS-Training-SALES-TECHNIQUES-.pdf" target="_blank">
      <img src="/img/pdf.jpg"> </a> </td>

    </tr>

jusqu'à la dernière ligne du tableau .
voilà, merci d'avance :)

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752 > Djazz-yeah Messages postés 13 Date d'inscription Statut Membre Dernière intervention

Les données relatives à tes formations... elles sont stockées dans une variable ou (comme je le pense) déjà présentes dans ton tableau ?

Quand tu dis :

Maintenant je souhaiterais, à partir de la liste déroulante, afficher toute les informations relatives au choix.

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.

Djazz-yeah Messages postés 13 Date d'inscription Statut Membre Dernière intervention

Merci pour tes réponses rapides jordane45

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

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752 > Djazz-yeah Messages postés 13 Date d'inscription Statut Membre Dernière intervention

pouvez vous me donner exactement le code à utiliser si possible avec un bouton "go"?

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

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

<script type="text/javascript">
function go(ID){
   
  // ici tu mets le code pour masquer toutes tes lignes
  //  indice : utiliser  style.display = 'none';
  //  Indice N°2 : Il faudra faire une boucle sur tous les TR de ton tableau

  //ici tu mets le code pour afficher la ligne 
 // dont l' ID= celui du VALUE de ton select


}
</script>

Djazz-yeah Messages postés 13 Date d'inscription Statut Membre Dernière intervention

Merciiiiiii
Je vais essayer ça et vous tenir au courant du résultat :)
après une Bonne documentation sur les 2 liens :P

Réponse 2 / 4

Djazz-yeah Messages postés 13 Date d'inscription Statut Membre Dernière intervention

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

<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 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

1 - Que fais, dans le code que tu nous montres, cette ligne tbody

<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 Statut Membre Dernière intervention

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:

 <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 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752 > Djazz-yeah Messages postés 13 Date d'inscription Statut Membre Dernière intervention

Très bien.
Donc ne te reste plus qu'a afficher LA ligne selectionnée..

Djazz-yeah Messages postés 13 Date d'inscription Statut Membre Dernière intervention

Et en plus clair? lol

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752 > Djazz-yeah Messages postés 13 Date d'inscription Statut Membre Dernière intervention

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).

Réponse 3 / 4

Djazz-yeah Messages postés 13 Date d'inscription Statut Membre Dernière intervention

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

Réponse 4 / 4

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

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 :

<!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 Statut Membre Dernière intervention

ça marche super bien merciiiiii Jordane T un amour :))))))))))

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752 > Djazz-yeah Messages postés 13 Date d'inscription Statut Membre Dernière intervention

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

Discussions similaires

Suppression listes déroulantes

Votre réponse

Discussions similaires