table html dynamique

**stefano** · 04/08/2012, 15h14

Bonjour a tous,

Je ne sais pas comment procéder pour faire varier le contenu d'une table en fonction d'une sélection d'un élément d'une liste déroulante.

Pouvez vous m'aider s'il vous plait?

Dans ma page j'ai 2 listes dépendantes, c'est a dire en fonction d'un item sélectionner dans la 1ère j'affiche uniquement dans la 2ème liste les infos dépendante de la 1ère sélection.

le tout mis dans un fieldset

Ce que je voudrais faire c'est en fonction de la sélection faire dans le 2ème j'affiche les infos sous forme de tableau.

Voila ce que je voudrais obtenir au final

Merci pour votre aide

**stefano** · 04/08/2012, 21h53

Ca vous aidera plus si je vous mets ce que j'ai déjà fait

Page principale

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
 
<div class="span10">
          <p id="prestataire"> Fiche de <?php echo $_SESSION['nom']." ".$_SESSION['prenom'];?>
          </p>
        <?php
              include_once('./prestationListe.php');
 
        ?>
        </div>
        <!--  tableau reprennant le détail de la prestation choisie dans la 2ème liste-->
    <!--Exemple-->
     <section class="DetailPrestationPercu">
        <article >
          <div class="titreTableau"> 
            Déjà perçu
          </div>
            <table class="table table-striped table-bordered table-condensed">
              <thead>
                  <tr>
                      <th>N°</th>
                      <th>Date</th>
                      <th>Remboursement</th>
                  </tr>
              </thead>
              <tbody>
                  <tr>
                      <td>1 </td>
                      <td>04-08-2012 </td>
                      <td>10€ </td>
                  </tr>
                  <tr>
                      <td>2 </td>
                      <td>04-07-2012 </td>
                      <td>15€ </td>
                  </tr>
              </tbody>
            </table>
        </article>
      </section>
 
        <!--Fin Exemple-->
 
      </div>
    </div>
  </body>
  <script type="text/javascript" src="../js/prestation_xhr.js" charset="UTF-8"></script>
</html>

Partie générant la 1ère liste (prestationListe.php)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<form action="<?php echo($_SERVER['PHP_SELF']); ?>" method="post" id="chgFamille">
      <fieldset class="identification">
      <legend>Sélectionnez une prestation</legend>
        <select name="famillePrestations" id="famillePrestations" onchange="getfamilles(this.value);">
          <option value="vide">- - - Famille de prestations - - -</option>
        <?php
        /* Construction de la première liste : on se sert du tableau PHP */
        foreach($famille as $nr => $nom)
        {
 
            ?>
 
        <option value="<?php echo($nr); ?>"><?php echo($nom); ?></option>
        <?php
        }
        ?>
        </select>
        <!-- Création de la seconde liste déroulante -->
      <span id="blocFamilles"></span><br />
 
      </fieldset>
    </form>

partie générant la seconde liste

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
 
 /*récupération de l'élément sélectionner dans la première liste*/
            $sqlFamille="SELECT Lib_Type_Prestation
                        FROM type_prestation
                        WHERE id_Type_Prestation =  $idr";
 
            $req=$connexion->requeteSelection($sqlFamille);
            $ligne=$req->fetch();
            // recupere l'intituler de la selection 1ere liste
            /* Création de la requéte pour avoir les prestations de cette famille de prestation */
            $sql2 = "SELECT idEvenement, lib_prestation
                     FROM nature_prestation
                     WHERE id_Type_Prestation =  $idr 
                     ORDER BY idEvenement";
 
            $rech_Prestation=$connexion->requeteSelection($sql2);     
            $rech_Prestation->execute();
            /* Compteur pour les prestations */
            $nd = 0;
 
            /* On crée deux tableaux pour les numéros et les prestations */
            $code_Evenement = array();
            $nom_Prestation = array();
            /* On va mettre les numéros et noms des prestations dans les deux tableaux */
 
            while(($ligne_Prestation=$rech_Prestation->fetch(PDO::FETCH_ASSOC))!=false)      
            {
                $code_Evenement[] = $ligne_Prestation['idEvenement'];
                $nom_Prestation[]  = $ligne_Prestation['lib_prestation'];
                $nd++;
            }
            /* Construction de la liste déroulante */
            $liste = "";
            $liste .= '<select name="prestation" id="prestation">'."\n";
            for($d = 0; $d < $nd; $d++)
            {
                $liste .= '<option value="'. $code_Evenement[$d] .'">'. ($nom_Prestation[$d]) .' </option>'."\n";
            }
            $liste .= '</select>'."\n";
            /* On libère la mémoire */
            //mysql_free_result($rech_Prestation);
            $rech_Prestation->closeCursor();
            /* Affichage de la liste déroulante */
            echo($liste);

**redoran** · 05/08/2012, 10h59

je te propose de faire les éléments du tableau dans les balises php avec des conditions if elseif ( si la liste des items n'est pas longue) sinon tu passe par case.

**stefano** · 05/08/2012, 11h52

merci pour ta réponse, mais comment je peux faire pour récupérer la valeur provenant de la seconde liste ?

**patrickbaras** · 05/08/2012, 12h37

en résumé du doit:

créer un fichier php qui génére le second select a partir de l'info du premier
<?php
$nom_du_premier_champs = $_GET['nom_du_premier_champs'];

.. select dans la db ...
.. generation du select ...
<select>
<option ... > .... </option>
<option ... > .... </option>
<option ... > .... </option>
<option ... > .... </option>
<option ... > .... </option>
<option ... > .... </option>
</select>
?>

créer dans ton form un div vide qui va recevoir ce second select
<form>
...

<div id='SecondSelect'></div>

</form>

faire en javascript une function
qui effectue une requete AJAX en passant la valeur du premier select à la page générant le deuxieme
mettre le resultat de l'ajax dans la div vide

appeller la function sur un onChange du premier select

idem pour le tableau créer un fichier php qui génére le tableau partir de l'info du premier et second select
créer dans ton form un div vide qui va recevoir le tableau
faire en javascript une function
qui effectue une requete AJAX en passant la valeur du premier et second select à la page générant le tableau
mettre le resultat de l'ajax dans la div vide du tableau

**stefano** · 05/08/2012, 13h33

ok, merci
Je vais explorer ta proposition patrickbaras et tenter de mettre ça en oeuvre

bon dimanche a tous

**patrickbaras** · 05/08/2012, 13h39

procède pas-à-pas et tu y arrivera.

**stefano** · 08/08/2012, 11h22

Eurêka,

J'ai procèdé de la même façon que pour générer la seconde liste mais en transposant le traitement pour un affichage sous forme de tableau

Ca marche nickel

Un grand merci a tous pour votre aide

Bonne journée

table html dynamique [MySQL]

PHP & Base de données

Discussions similaires

Partager

Partager