4

I have this js part of script:

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

I want use this for create a table with twitter bootstrap. In the html page there is this table element:

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

But this solution doesn't works. How I have to do? Thank you!

sharkbait
  • 2,980
  • 16
  • 51
  • 89

2 Answers2

9

First of all, you're not appending any <tr> elements which are needed in a table, and secondly you're referring to $("table_div") instead of $("#table_div") (the hashtag # means that you're referring to an ID, just like in CSS).

jQuery.each(data, function(index, value) {
     $("#table_div").append("<tr><td>" + value + "</td></tr>");
});
h2ooooooo
  • 39,111
  • 8
  • 68
  • 102
5

Besides referring to the node <table_div> instead of the id #table_div you don't want to append anything to the table node.

You should take a look at this as well as here and here.

You should use tbody when using Twitters Bootstrap anyways for example, like so:

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

here the right js

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

For more research look here Add table row in jQuery

Edit:

Ok i wrote you an entire example using twitters bootstrap and jQuery. This works, if it doesn't for your data array, 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>
Community
  • 1
  • 1
codingjoe
  • 1,210
  • 15
  • 32
  • Ha, true, it can't. `$.each(callback)`. There is no two option each. You need to use regular foreach in javascript not $.each() from jQuery. It's for iterating all child nodes. – codingjoe Sep 22 '12 at 17:59
  • If it still doesn't work, please provide more detail about `data`. Should if work, pleas don't forget to mark this as an answer, took me a while ;) – codingjoe Sep 22 '12 at 18:06
  • 1
    Um, *$.each(dataset,handler)* works just fine. It's *$('.el').each(handler)* that just accepts one argument. – m90 Sep 22 '12 at 18:30
  • Oh, right [this each](http://api.jquery.com/jQuery.each/). This question is driving me insane. @sharkbait could you pleas post a dump of data? – codingjoe Sep 22 '12 at 18:34
  • I John thank you for your help. I don't have a dump of data, but is a json data, formed by couples of "timestamp:value". I would create a table with this two column... – sharkbait Sep 24 '12 at 09:30
  • @sharkbait I added an entire demo. Pleas don't forget to give me some thumbs up ;) It it doesn't work with you data array, something must be wrong with it. – codingjoe Sep 24 '12 at 12:01