How do I output the contents of an array in an html table while using jQuery?

Question

How do I display the contents of an array in a HTML table while using jQuery?

Here's my script... This outputs the objects in the array on top of the table not in the table.

HTML

<table>
<thead>
<tr>
<th>ITEM ID</th>
<th>NUMBER OF BAGS</th>
<th>WEIGHT</th>
</tr>
</thead>
<tbody>
<div id="returnlist"></div>
</tbody>
</table>

jQuery

var tempList = new Array();
$('#add').click(function(){
var split = $('#onhanditem').val().split('_');
var itemid = split['0']; 
var kilo = $('#kilo').val();
var bagsReturned = $('#bagsReturned').val();
var totalbagkiloreturned = kilo+'_'+bagsReturned;
tempList[itemid] = totalbagkiloreturned;
list = '';
// i = ITEM ID | tempList = totalbagkiloreturned
for (var i in tempList){
var itemID = i;
var split = tempList[i].split('_');
var kilo = split['0'];
var numBags = split['1'];
list+='<tr><td>'+itemID+'</td><td>'+kilo+'</td><td>'+numBags+'</td></tr>';
}
$('#returnlist').html(list);
}); 
});

Anthony Grist · Accepted Answer · 2011-09-27 13:18:46Z

1

As far as I'm aware, the middle of a table isn't a valid location for a <div> tag, which is why it's not being displayed inside the table. Why not put your id on the <tbody> tag instead, and do away with the div altogether?

answered Sep 27, 2011 at 13:18

Anthony Grist

38.4k8 gold badges64 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

JohnSmith Over a year ago

Thanks! I wasn't aware it's possible to add an id in the tbody tag. I assume I can also add a class right?

tobyodavies Over a year ago

@JohnSmith you can add id, class, title and style attributes to very nearly anything in HTML, the exceptions are basically only in <head>

tobyodavies · Accepted Answer · 2011-09-27 13:18:12Z

1

You can't have a div inside a table, it's simply not valid HTML.

Try the following HTML instead

<table>
<thead>
<tr>
<th>ITEM ID</th>
<th>NUMBER OF BAGS</th>
<th>WEIGHT</th>
</tr>
</thead>
<tbody id="returnlist">
</tbody>
</table>

answered Sep 27, 2011 at 13:18

tobyodavies

28.2k5 gold badges45 silver badges58 bronze badges

Collectives™ on Stack Overflow

How do I output the contents of an array in an html table while using jQuery?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest