Afficher les lignes d'un tableau d'aprés une liste déroulante [Résolu/Fermé]

Signaler
Messages postés
13
Date d'inscription
lundi 22 février 2016
Statut
Membre
Dernière intervention
25 février 2016
-
Messages postés
32372
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
9 mai 2021
-
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

4 réponses

Messages postés
32372
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
9 mai 2021
3 468
Bonjour
sans voir ce que tu as commencé à coder.... IMPOSSIBLE de t'aider!
Messages postés
13
Date d'inscription
lundi 22 février 2016
Statut
Membre
Dernière intervention
25 février 2016

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 :)
Messages postés
32372
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
9 mai 2021
3 468 >
Messages postés
13
Date d'inscription
lundi 22 février 2016
Statut
Membre
Dernière intervention
25 février 2016

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.
Messages postés
13
Date d'inscription
lundi 22 février 2016
Statut
Membre
Dernière intervention
25 février 2016

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
Messages postés
32372
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
9 mai 2021
3 468 >
Messages postés
13
Date d'inscription
lundi 22 février 2016
Statut
Membre
Dernière intervention
25 février 2016


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>

Messages postés
13
Date d'inscription
lundi 22 février 2016
Statut
Membre
Dernière intervention
25 février 2016

Merciiiiiii
Je vais essayer ça et vous tenir au courant du résultat :)
après une Bonne documentation sur les 2 liens :P
Messages postés
13
Date d'inscription
lundi 22 février 2016
Statut
Membre
Dernière intervention
25 février 2016

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 >
Messages postés
13
Date d'inscription
lundi 22 février 2016
Statut
Membre
Dernière intervention
25 février 2016
>
Messages postés
32372
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
9 mai 2021

Oui absolument, mais ce que j'ignore encore quelle fonction utiliser (ou plus simplement quel code dois je utiliser) pour ré-afficher la ligne selon le select, excusez moi je débute en Javascript!
Messages postés
32372
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
9 mai 2021
3 468 >
Messages postés
13
Date d'inscription
lundi 22 février 2016
Statut
Membre
Dernière intervention
25 février 2016

Tu sais, en javascript, masquer une ligne ( ou un tbody...comme tu l'as fait dans le code que tu avais donné....) ... il suffit donc de faire pareil mais en affichant cette fois. (autrement dit... retirer le 'none' du display)
Messages postés
32372
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
9 mai 2021
3 468 >
Messages postés
32372
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
9 mai 2021

 document.getElementById(id_de_la_ligne_a_afficher).style.display ="";
Messages postés
13
Date d'inscription
lundi 22 février 2016
Statut
Membre
Dernière intervention
25 février 2016

Merci merci :) une dernière question (j'espère)
(id_de_la_ligne_a_afficher) étant égal à VALUE de select, comment exprimer ça SVP, après presque 2h de recherche je reviens vers vous
Messages postés
32372
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
9 mai 2021
3 468 >
Messages postés
13
Date d'inscription
lundi 22 février 2016
Statut
Membre
Dernière intervention
25 février 2016

Montres moi ton code complet html + js ....que je vois où tu en es
Messages postés
13
Date d'inscription
lundi 22 février 2016
Statut
Membre
Dernière intervention
25 février 2016

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>
Messages postés
32372
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
9 mai 2021
3 468
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>

Messages postés
13
Date d'inscription
lundi 22 février 2016
Statut
Membre
Dernière intervention
25 février 2016

ça marche super bien merciiiiii Jordane T un amour :))))))))))
Messages postés
32372
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
9 mai 2021
3 468 >
Messages postés
13
Date d'inscription
lundi 22 février 2016
Statut
Membre
Dernière intervention
25 février 2016

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