Tableau extensible avec des champs select lié à une base mysql

Résolu/Fermé

Khris2015 - Modifié par jordane45 le 11/06/2015 à 12:21
Khris2015 Messages postés 6 Date d'inscription jeudi 11 juin 2015 Statut Membre Dernière intervention 17 juin 2016 - 12 juin 2015 à 13:03

Bonjour à tous,

je suis vraiment débutant, je dirais même nul en html/php/mysq. ça fait un bon moment j'essaie de faire une page dans lequel, j'ai un tableau qui doit me permettre d'enregistrer plusieurs agents en même temps. sur chaque ligne du tableau, je veux avoir un champs select qui me permette de selectionner un agent dans ma base mysql et à coté, un bouton "+" pour ajouter une autre ligne pour choisir un autre agent.

J'ai pu faire le tableau avec le champs select. pour la première ligne pas de problème, j'arrive à afficher la liste des agents et d'en choisir un. le problème c'est avoir les lignes suivantes avec le champs select et avec en option la liste des agents. la deuxième ligne vient mais rien ne s'y affiche, comment faire? je suis à bout de souffle... Merci de votre aide!

Voici mon code:

le tableau

     <table border="1" id="kids" align="center">
     <tr>
         <th>Nom et prénom(s)</th>
     </tr>
     <tbody  >
         <tr >
             <td  >
                 <select name="nom" id="demande">            
                 <?php while ($resultat_agent = mysql_fetch_array ($donnees_agent))
  {?>
          echo <option value="<?php echo $resultat_agent['agt_id']?>"><?php echo $resultat_agent['agt_nom'].' '.$resultat_agent['agt_pren'];?></option>
           <?php
      }?>           
          </select>
                </td>
                <td>
                   <input type="button" id="add_kid()" onClick="addKid()" value="+" />
                 </td>
                </tr>
            </tbody>
      </table>

mon code javascript

     <script type="text/javascript">
 
            var i = 0;
 
            function addKid()
            {
                if (i < 5)
                {
                    var newRow = document.createElement('tr');
 
                    newRow.innerHTML = '<td> <select name="nom_'+i+'"></select></td><td><input type="button" id="add_kid()" onClick="addKid()" value="+" /><input type="button" value="-" onclick="removeKid(this.parentNode)"></td>';
 
                    document.getElementById('kids').appendChild(newRow);
                    i++;
                }
            }
 
            function removeKid(element)
            {
                document.getElementById('kids').removeChild(element.parentNode);
                i--;
            }
 
        </script>

EDIT : Ajout du LANGAGE dans les balises de code (la coloration syntaxique).
Explications disponibles ici :
https://codes-sources.commentcamarche.net/faq/10686-le-nouveau-codes-sources-comment-ca-marche#balises-code

Merci d'y penser dans tes prochains messages.
.

A voir également:

Tableau extensible avec des champs select lié à une base mysql
Tableau croisé dynamique - Guide
Tableau ascii - Guide
Formules excel de base - Guide
Tableau word - Guide
Reboot and select proper boot device - Forum Windows

6 réponses

Réponse 1 / 6

jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
11 juin 2015 à 12:26

Bonjour,

la deuxième ligne vient mais rien ne s'y affiche

Normal .. vu que quand tu créé ta ligne .. tu ne mets rien dans ton select....

 newRow.innerHTML = '<td> <select name="nom_'+i+'"></select></td><td><input type="button" id="add_kid()" onClick="addKid()" value="+" /><input type="button" value="-" onclick="removeKid(this.parentNode)"></td>';

Plusieurs possibilités :
- Tu clone le SELECT existant (celui qui dispose de la liste)
- Tu vas chercher, via AJAX, les données nécessaires à son remplissage.

- Dans les deux cas, des exemples existent sur le net.
- Penses à utiliser JQUERY. ( que ça soit pour la manipulation de l'ajax ou pour cloner tes éléments ...JQUERY facilite grandement l'écriture du code.)

Par exemple.. pour cloner en jquery :
https://api.jquery.com/clone/

Réponse 2 / 6

Khris2015 Messages postés 6 Date d'inscription jeudi 11 juin 2015 Statut Membre Dernière intervention 17 juin 2016
Modifié par jordane45 le 11/06/2015 à 14:23

Merci jordane45 pour ta promtitude.
J'ai essayé de mettre mon code php qui renvoit la liste des agent dans mon select, mais à l'execution, rien ne s'affiche dans les champs select

mon code javascript modifié. Merci de voir pourquoi ça ne marche pas!

  
   <script type="text/javascript">
 
            var i = 0;
 
            function addKid()
            {
                if (i < 5)
                {
                    var newRow = document.createElement('tr');
 
                    newRow.innerHTML = '<td> <select name="nom_'+i+'"><?php 
       while ($resultat_agent = mysql_fetch_array ($donnees_agent))
       {?>
              echo <option value="<?php echo $resultat_agent['agt_id']?>"><?php echo $resultat_agent['agt_nom'].' '.$resultat_agent['agt_pren'];?></option>
               <?php
       }    
         ?>  </select></td><td><input type="button" id="add_kid()" onClick="addKid()" value="+" /><input type="button" value="-" onclick="removeKid(this.parentNode)"></td>';
 
                    document.getElementById('kids').appendChild(newRow);
                    i++;
                }
            }
 
            function removeKid(element)
            {
                document.getElementById('kids').removeChild(element.parentNode);
                i--;
            }
 
        </script>

Réponse 3 / 6

jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
11 juin 2015 à 14:24

Javascript s'exécute côté POSTE utilisateur ..... alors que le PHP, lui, se fait côté SERVEUR !

Je t'ai donné dans mon précédent message, les deux solutions possibles à utiliser.
Le clonage
ou l' AJAX.
(perso.. je pencherai plus pour l'ajax).

Réponse 4 / 6

Khris2015 Messages postés 6 Date d'inscription jeudi 11 juin 2015 Statut Membre Dernière intervention 17 juin 2016
12 juin 2015 à 10:43

Salut,
Je reviens encore avec des inquiétudes. Je suis vraiment un nul en développement web. Je suis allé voir ton lien, je l'ai lu et essayé de comprendre. J'ai vu les merveilles que peut faire la méthode .clone() qu'offre jquery. Seulement, je sais pas trop comment l'adapter à mon cas. Je t'envoie un extrait de mon script, tu vas certainement en rire, mais bon je suis nul et je veux vraiment apprendre...
Merci pour l'effort que tu fais pour me comprendre!

  <script type="text/javascript">
 
            var i = 0;
 
            function addKid()
            {
                if (i < 5)
                {
                    var newRow = document.createElement('tr');
 
                    newRow.innerHTML = '<td> <select name="nom_'+i+'"><script>
$( "#nom" ).clone().appendTo( "#nom" );
</script></select></td><td><input type="button" id="add_kid()" onClick="addKid()" value="+" /><input type="button" value="-" onclick="removeKid(this.parentNode)"></td>';
 					
                    document.getElementById('kids').appendChild(newRow);
                    i++;
					
                }
            }
 
            function removeKid(element)
            {
                document.getElementById('kids').removeChild(element.parentNode);
                i--;
            }
			
			 
        </script>

Je n'ai certainement pas bien appelé ma méthode .clone(), car je reçois des erreurs. Peux tu m'aider, stp!

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 6

jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
Modifié par jordane45 le 12/06/2015 à 11:54

Bonjour,


<table id='montableau' border='1' id='kids' align='center'>
 <thead>
  <tr>
   <th>Nom et prénom(s)</th>
  </tr>
  </thead>
  <tbody  >
    <tr id='tr_1'>
    <td>
     <select name='nom' id='demande'>            
     <?php 
     while ($resultat_agent = mysql_fetch_array ($donnees_agent)){
      echo "<option value='".$resultat_agent['agt_id']."'>
          ".$resultat_agent['agt_nom']." ".$resultat_agent['agt_pren'].
        "</option>";
     }           
     ?>
     </select>
    </td>
    <td>
     <input type='button' id='add_kid' onClick='addKid()' value='+' />
     <input type='button' class='removeKid'  value='-' />
     </td>
   </tr>
  </tbody>
</table>

<script type="text/javascript">
     
 function compteTR(id_table){
  return $('#'+id_table +' tr').length;     
 }

 function addKid(){
   var nbMaxLignes = 6
   var nbTR = compteTR("montableau") +1 ;
   if (nbTR < nbMaxLignes){
       var $tr = $("#tr_1");
      var $clone = $tr.clone();
        $clone.find(':text').val('');
        $tr.after($clone);
   }
   
 $(".removeKid").click(function(){
    var nbTR = compteTR("montableau");
  if (nbTR >2){
  var $row = $(this).closest("tr");
  $row.remove();
  }
 });
 }

 $(".removeKid").click(function(){
    var nbTR = compteTR("montableau");
  if (nbTR >2){
  var $row = $(this).closest("tr");
  $row.remove();
  }
 });

</script>

Cordialement,
Jordane

Khris2015 Messages postés 6 Date d'inscription jeudi 11 juin 2015 Statut Membre Dernière intervention 17 juin 2016
Modifié par Khris2015 le 12/06/2015 à 12:01

Grand, grand merci jordane45, j'ai juste remplacer ta ligne

foreach( $arr as $resultat_agent)

par ma ligne

 while ($resultat_agent = mysql_fetch_array ($donnees_agent))

et ça marche nikel!!! Encore merci!

jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650 > Khris2015 Messages postés 6 Date d'inscription jeudi 11 juin 2015 Statut Membre Dernière intervention 17 juin 2016
12 juin 2015 à 12:09

prends le code que j'ai ajouté en dessous... il apporte quelques petites corrections.

Réponse 6 / 6

jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
12 juin 2015 à 11:55

Petite correction :


<table id='montableau' border='1' id='kids' align='center'>
 <thead>
  <tr>
   <th>Nom et prénom(s)</th>
  </tr>
  </thead>
  <tbody  >
    <tr id='tr_1'>
    <td>
     <select name='nom[]' id='demande'>            
     <?php 
     while ($resultat_agent = mysql_fetch_array ($donnees_agent)){
      echo "<option value='".$resultat_agent['agt_id']."'>
          ".$resultat_agent['agt_nom']." ".$resultat_agent['agt_pren'].
        "</option>";
     }           
     ?>
     </select>
    </td>
    <td>
     <input type='button' id='add_kid' onClick='addKid()' value='+' />
     <input type='button' class='removeKid'  value='-' />
     </td>
   </tr>
  </tbody>
</table>

jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
Modifié par jordane45 le 12/06/2015 à 11:58

 function compteTR(id_table){
  return $('#'+id_table +' tr').length;     
 }

 function addKid(){
   var nbMaxLignes = 6
   var nbTR = compteTR("montableau tbody") +1 ;
   if (nbTR < nbMaxLignes){
       var $tr = $("#tr_1");
      var $clone = $tr.clone();
        $clone.find(':text').val('');
         $clone.attr('id',"tr_"+nbTR );
        $tr.after($clone);
   }
   
 $(".removeKid").click(function(){
    var nbTR = compteTR("montableau");
  if (nbTR >1){
  var $row = $(this).closest("tr");
  $row.remove();
  }
 });
 }

 $(".removeKid").click(function(){
    var nbTR = compteTR("montableau");
  if (nbTR >1){
  var $row = $(this).closest("tr");
  $row.remove();
  }
 });

jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
12 juin 2015 à 12:10

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

Khris2015 Messages postés 6 Date d'inscription jeudi 11 juin 2015 Statut Membre Dernière intervention 17 juin 2016
12 juin 2015 à 13:03

Merci Jordane! tu es cool!

Discussions similaires

Nom de champs du tableau croisé dynamique non valide

ou sont les bananes ?

exo pix

Trouver le nom d'un tableau avec sa photo.

liste de noms par ordre alphabétique

Discussions similaires

Newsletters