Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
995 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  remplir un tableau HTML avec des variables JS

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

remplir un tableau HTML avec des variables JS

n°2198295
bloomingda​ls
Posté le 22-07-2013 à 14:07:19  profilanswer
 

Bonjour,
je voudrais créer un tableau html de cette forme:
 
nom  nom
prenom prenom
age age
naissance  date
 
le nombre de ligne et leurs étiquettes sont fixe, ce qui change ce sont les variables en italiques.
Ces variables sont récupérées graçce à une fonction jquery que jai écrite et qui me retourne un tableau de valeurs "tab"
comment est ce que je peux utiliser "tab" pour remplir la dexième colonne de mon tableau HTML.
 
Merci

mood
Publicité
Posté le 22-07-2013 à 14:07:19  profilanswer
 

n°2198296
sltpaulo
Posté le 22-07-2013 à 14:13:22  profilanswer
 

Peux-tu mettre la partie de ton code concerné?
 
Merci

n°2198297
bloomingda​ls
Posté le 22-07-2013 à 14:26:54  profilanswer
 

Voici la fonction jquery: elle prend en entrée deux paramètres "as" et "router" et les envoie vers le script php "peer.php". Ce derniers les utilisent dans des requêtes SQL et retourne en résultat le tableau "infos". c'est un tableau à une seule colonne et 14 lignes où chaque ligne va remplir une cellule de mon tableau HTML:

Code :
  1. $('#bout').click(function() {
  2.          var tab = document.getElementById("infos" );
  3.          var as = $('#choose').val();
  4.          var router = $('#choose2').val();
  5.          if(tab.style.display=="none" ) {
  6.               tab.style.display = "block";
  7.                }
  8.             $.ajax({
  9.                       url: "/peers/peer.php",
  10.                       type: "post",
  11.                       data: {as: as, router: router},
  12.                       success: function(data){
  13.                       var infos = JSON.parse(data);
  14.                       var i = 0;
  15.                       var select = document.getElementById("infos" );               
  16.                       while (i<infos.length)
  17.                        { 
  18.                          
  19.                            ici je bloque je ne sais pas comment remplir les cellule du tableau HTML
  20.                        }
  21.                       }
  22.                  });
  23.          
  24.           });


 
voila le code html du tableau à remplir, il contient 14 lignes et deux colonnes. Le contenu de la première colonne est toujours fixe (étiquette):

Code :
  1. <div class="CSSTableGenerator" id="infos" style="display:none;">
  2.                 <table>
  3.                     <tr>
  4.                        <td>Peer address</td>
  5.                        <td></td>         
  6.                     </tr>
  7.                     <tr>
  8.                        <td>Peer AS</td>
  9.                        <td></td>         
  10.                     </tr>
  11.                     <tr>
  12.                        <td>State</td>
  13.                        <td></td>         
  14.                     </tr>
  15.                     <tr>
  16.                        <td>Status</td>
  17.                        <td></td>         
  18.                     </tr>
  19.                     <tr>
  20.                        <td>Bgp version</td>
  21.                        <td></td>         
  22.                     </tr>
  23.                     <tr>
  24.                        <td>Port</td>
  25.                        <td></td>         
  26.                     </tr>
  27.                     <tr>
  28.                        <td>Established time</td>
  29.                        <td></td>         
  30.                     </tr>
  31.                     <tr>
  32.                        <td>Configured holdtime</td>
  33.                        <td></td>         
  34.                     </tr>
  35.                      <tr>
  36.                        <td>Configured keepalive</td>
  37.                        <td></td>         
  38.                     </tr>
  39.                     <tr>
  40.                        <td>Update time</td>
  41.                        <td></td>         
  42.                     </tr>
  43.                     <tr>
  44.                        <td>Received messages</td>
  45.                        <td></td>         
  46.                     </tr>
  47.                     <tr>
  48.                        <td>Sent messages</td>
  49.                        <td></td>         
  50.                     </tr>
  51.                     <tr>
  52.                        <td>Received updates</td>
  53.                        <td></td>         
  54.                     </tr>
  55.                     <tr>
  56.                        <td>Sent updates</td>
  57.                        <td></td>         
  58.                     </tr>
  59.                 </table>
  60.            
  61. </div>


 
merci

n°2198300
sltpaulo
Posté le 22-07-2013 à 14:42:25  profilanswer
 

En mode moche est rapide tu peux faire ça si tu veux :
 

Code :
  1. <div class="CSSTableGenerator" id="infos" style="display:none;">
  2.                 <table>
  3.                     <tr>
  4.                        <td>Peer address</td>
  5.                        <td id='td_peer_addr'></td>       
  6.                     </tr>
  7.                     <tr>
  8.                        <td>Peer AS</td>
  9.                        <td id='td_peer_as'></td>       
  10.                     </tr>
  11.                     <tr>
  12.                        <td>State</td>
  13.                        <td id='td_state'></td>       
  14.                     </tr>
  15.                     <tr>
  16.                        <td>Status</td>
  17.                        <td id='td_status'></td>       
  18.                     </tr>
  19. ...


 
Puis ton code JS :
 

Code :
  1. $.ajax({
  2.                       url: "/peers/peer.php",
  3.                       type: "post",
  4.                       data: {as: as, router: router},
  5.                       success: function(data){
  6.                       var infos = JSON.parse(data);
  7.                       var i = 0;
  8.                       var select = document.getElementById("infos" );             
  9.                       while (i<infos.length)
  10.                        {
  11.                          document.getElementById("td_peer_addr" ).html(infos.peer_addr);
  12.                            document.getElementById("td_peer_aas" ).html(infos.peer_as);
  13.                            ....
  14.                        }
  15.                       }
  16.                  });


 
ou si ton tableau est toujours fixe, qu'il ne changera jamais et que les éléments sont dans le bon ordre tu peux faire ça : (tu modifies uniquement le JS)  
 

Code :
  1. $.ajax({
  2.                       url: "/peers/peer.php",
  3.                       type: "post",
  4.                       data: {as: as, router: router},
  5.                       success: function(data){
  6.                       var infos = JSON.parse(data);
  7.                       var i = 0;
  8.                       var select = document.getElementById("infos" );     
  9. var current = jQuery(select).chidren('table').children('tr');       
  10.                       for (u in infos)
  11.                        {
  12. current.children('td:last-child').html(u);
  13. current = current.next();
  14.                        }
  15.                       }
  16.                  });

n°2198304
bloomingda​ls
Posté le 22-07-2013 à 14:57:42  profilanswer
 

Je te remercie c'est extactement ce que je voulais.

n°2198310
sltpaulo
Posté le 22-07-2013 à 15:19:59  profilanswer
 

Pas de soucis, bonne journée

n°2199223
howuselogi​ciel
Posté le 01-08-2013 à 19:55:20  profilanswer
 

tu peux essayer


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  remplir un tableau HTML avec des variables JS

 

Sujets relatifs
[PHP/JS]Passage de valeurs php vers une fonction JSBugs sur un site jQuery/HTML
Reader Adobe PDF en local sur page HTML[JSF/HTML] Pb de mise en cache img,css, js par mon navigateur
Générer un fichier XML a partir de données HTML(HTML) Alignement d'image.
[JS] Problème limite d'une variable atteinteséparateur espace sélection tableau
Recherche de valeur dans un tableau dynamique[HTML/CSS/Javascript] Vidéo Youtube
Plus de sujets relatifs à : remplir un tableau HTML avec des variables JS


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR