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

6 réponses

jordane45
Messages postés
35502
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
26 mai 2022
4 163
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/


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



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.
.
0
jordane45
Messages postés
35502
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
26 mai 2022
4 163
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).

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

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

Posez votre question
jordane45
Messages postés
35502
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
26 mai 2022
4 163
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
0
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!
0
jordane45
Messages postés
35502
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
26 mai 2022
4 163 > 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.
0
jordane45
Messages postés
35502
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
26 mai 2022
4 163
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>



0
jordane45
Messages postés
35502
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
26 mai 2022
4 163
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();
  }
 });

0
jordane45
Messages postés
35502
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
26 mai 2022
4 163
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
0
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!
0