remplir un tableau HTML avec des variables JS

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : remplir un tableau HTML avec des variables JS

bloomingdals

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

Publicité

sltpaulo

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

Merci

bloomingdals

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 :

$('#bout').click(function() {
var tab = document.getElementById("infos" );
var as = $('#choose').val();
var router = $('#choose2').val();
if(tab.style.display=="none" ) {
tab.style.display = "block";
}
$.ajax({
url: "/peers/peer.php",
type: "post",
data: {as: as, router: router},
success: function(data){
var infos = JSON.parse(data);
var i = 0;
var select = document.getElementById("infos" );
while (i<infos.length)
{
ici je bloque je ne sais pas comment remplir les cellule du tableau HTML
}
}
});
});

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 :

<div class="CSSTableGenerator" id="infos" style="display:none;">
<table>
<tr>
<td>Peer address</td>
<td></td>
</tr>
<tr>
<td>Peer AS</td>
<td></td>
</tr>
<tr>
<td>State</td>
<td></td>
</tr>
<tr>
<td>Status</td>
<td></td>
</tr>
<tr>
<td>Bgp version</td>
<td></td>
</tr>
<tr>
<td>Port</td>
<td></td>
</tr>
<tr>
<td>Established time</td>
<td></td>
</tr>
<tr>
<td>Configured holdtime</td>
<td></td>
</tr>
<tr>
<td>Configured keepalive</td>
<td></td>
</tr>
<tr>
<td>Update time</td>
<td></td>
</tr>
<tr>
<td>Received messages</td>
<td></td>
</tr>
<tr>
<td>Sent messages</td>
<td></td>
</tr>
<tr>
<td>Received updates</td>
<td></td>
</tr>
<tr>
<td>Sent updates</td>
<td></td>
</tr>
</table>
</div>

merci

sltpaulo

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

Code :

<div class="CSSTableGenerator" id="infos" style="display:none;">
<table>
<tr>
<td>Peer address</td>
<td id='td_peer_addr'></td>
</tr>
<tr>
<td>Peer AS</td>
<td id='td_peer_as'></td>
</tr>
<tr>
<td>State</td>
<td id='td_state'></td>
</tr>
<tr>
<td>Status</td>
<td id='td_status'></td>
</tr>
...

Puis ton code JS :

Code :

$.ajax({
url: "/peers/peer.php",
type: "post",
data: {as: as, router: router},
success: function(data){
var infos = JSON.parse(data);
var i = 0;
var select = document.getElementById("infos" );
while (i<infos.length)
{
document.getElementById("td_peer_addr" ).html(infos.peer_addr);
document.getElementById("td_peer_aas" ).html(infos.peer_as);
....
}
}
});

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 :

$.ajax({
url: "/peers/peer.php",
type: "post",
data: {as: as, router: router},
success: function(data){
var infos = JSON.parse(data);
var i = 0;
var select = document.getElementById("infos" );
var current = jQuery(select).chidren('table').children('tr');
for (u in infos)
{
current.children('td:last-child').html(u);
current = current.next();
}
}
});

bloomingdals

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

sltpaulo

Pas de soucis, bonne journée

howuselogiciel

tu peux essayer

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 JS	Bugs 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 atteinte	sé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

Page générée en 0.078 secondes