Table avec bootstrap twitter et jQuery

J'ai cette js partie du script:Table avec bootstrap twitter et jQuery

jQuery.each(data, function(index, value) { 
    $("table_div").append("<td>" + value + "</td>"); 
});

Je veux l'utiliser pour créer une table avec bootstrap twitter. Dans la page html, il y a cet élément de table:

<table class="table table-striped" id="table_div"> 
</table>

Mais cette solution ne fonctionne pas. Comment dois-je faire? Je vous remercie!

Source

2012-09-22 sharkbait

Qu'est-ce qui "ne fonctionne pas"? – moonwave99

Je n'ai pas de tableau du style de bootstrap twitter – sharkbait

Quelle est la structure de 'data'? Est-ce un tableau simple ou un objet json? – Bogdan

Tout d'abord, vous n'êtes pas annexant les <tr> éléments qui sont nécessaires dans une table, et vous en second référant à $("table_div") au lieu de $("#table_div") (le hashtag # signifie que vous faites référence à un ID, comme en CSS).

jQuery.each(data, function(index, value) { 
    $("#table_div").append("<tr><td>" + value + "</td></tr>"); 
});

Source

2012-09-22 16:46:24 h2ooooooo

Ne fonctionne pas. Je veux un

élément avec des lignes et des colonnes avec des valeurs de données. – sharkbait

@sharkbait À quoi ressemblent vos données? – h2ooooooo

Outre référence au nœud <table_div> au lieu de l'ID #table_div vous ne voulez pas ajouter quoi que ce soit au nœud de table. Vous devriez jeter un oeil à this ainsi que here et here.

Vous devez utiliser tbody lors de l'utilisation Twitters Bootstrap de toute façon, par exemple, comme ceci:

<table id="table_div" class="table table-striped"> 
    <tbody></tbody> 
<table>

ici le droit js

for (i in data) { 
    $('#table_div > tbody:last').append('<tr><td>'+data[i]+'</td></tr>'); 
}

Pour plus de recherche regarder ici Add table row in jQuery

Edit:

Ok, je vous ai écrit un exemple complet en utilisant twitters bootstrap et jQuery. Cela fonctionne, si ce n'est pas le cas pour votre tableau de données, quelque chose ne va pas.

<!DOCTYPE html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css"> 
</head> 
<body> 
<table class="table table-striped" id="my-table"> 
<tbody> 
</tbody> 
</table> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
<script type="text/javascript" src="assets/js/bootstrap.js"></script> 
<script type="text/javascript"> 
var data = ["foo","bar"]; 
$(document).ready(function(){ 
     $.each(data, function(i,item){ 
       $('#my-table > tbody:last').append('<tr><td>'+item+'</td></tr>'); 
     }); 
}); 
</script> 
</body> 
</html>

Source

2012-09-22 17:16:44 codingjoe

Je ne sais pas pourquoi ça ne marche pas ... Je pense que c'est vrai, mais ça ne marche pas ... – sharkbait

Ha, c'est vrai, ça ne peut pas. '$ .each (rappel)'. Il n'y a pas deux options chacune. Vous devez utiliser foreach en javascript et non $ .each() de jQuery. C'est pour l'itération de tous les nœuds enfants. – codingjoe

Si cela ne fonctionne toujours pas, veuillez fournir plus de détails sur 'data'. Si cela devait fonctionner, les plaidoyers n'oublient pas de marquer cela comme une réponse, cela m'a pris un certain temps;) – codingjoe

Table avec bootstrap twitter et jQuery

Répondre

Questions connexes