remplir un tableau HTML avec des variables JS

Marsh Posté le 22-07-2013 à 14:07:19

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

Reply

Marsh Posté le 22-07-2013 à 14:07:19

Reply

Marsh Posté le 22-07-2013 à 14:13:22

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

Merci

Reply

Marsh Posté le 22-07-2013 à 14:26:54

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

Reply

Marsh Posté le 22-07-2013 à 14:42:25

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

Reply

Marsh Posté le 22-07-2013 à 14:57:42

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

Reply

Marsh Posté le 22-07-2013 à 15:19:59

Pas de soucis, bonne journée

Reply

Marsh Posté le 01-08-2013 à 19:55:20

tu peux essayer

Reply

remplir un tableau HTML avec des variables JS

Sujets relatifs:

Leave a Replay