table html dynamique

Version imprimable

04/08/2012, 15h14
stefano

table html dynamique

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

http://img811.imageshack.us/img811/3228/image000fi.jpg

Merci pour votre aide

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

Page principale

Code:

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:

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:

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

05/08/2012, 10h59
redoran

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.
05/08/2012, 11h52
stefano

merci pour ta réponse, mais comment je peux faire pour récupérer la valeur provenant de la seconde liste ?
05/08/2012, 12h37
patrickbaras

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
05/08/2012, 13h33
stefano

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

bon dimanche a tous
05/08/2012, 13h39
patrickbaras

procède pas-à-pas et tu y arrivera.
08/08/2012, 11h22
stefano

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