Table with twitter bootstrap and jQuery
I have this js part of the script:
jQuery.each(data, function(index, value) { $("table_div").append("<td>" + value + "</td>"); }); I want to use this to create a twitter bootstrap table. The html page has this table element:
<table class="table table-striped" id="table_div"> </table> But this solution does not work. How am I supposed to do this? Thanks!
First of all, you do not add any <tr> elements that are necessary in the table, and secondly, you refer to $("table_div") instead of $("#table_div") (hashtag # means that you are referring to identifier, as in CSS).
jQuery.each(data, function(index, value) { $("#table_div").append("<tr><td>" + value + "</td></tr>"); }); Besides linking to node <table_div> instead of id #table_div , you do not want to add anything to the node table.
You should take a look at this one , as well as here and here .
You should use tbody when using Twitters Bootstrap anyway, for example:
<table id="table_div" class="table table-striped"> <tbody></tbody> <table> here is the right js
for (i in data) { $('#table_div > tbody:last').append('<tr><td>'+data[i]+'</td></tr>'); } For more details see here Add a table row in jQuery
Edit:
Ok, I wrote you a whole example using twitters bootstrap and jQuery. This works if it is not for your dataset, something is wrong with it.
<!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>