Giridharan Giridharan - 1 year ago 81
jQuery Question

Displaying Table view dynamically using jquery

I have stuck with an issue of displaying data with appropriate format. Please guide me how to achieve of expected result in jquery

$(document).ready(function () {
var numbers = ['hamburger', 'Potato salad', 'Brocolli', 'Apple pie'];
var month = [2,3,6,5,4];
for(i = 0; i < numbers.length; i++) {


<table> <tr>
th>Food Item</th>
<th>Portion Size</th>
<td id="foodItem">
<td id="portionSize">


FoodItem Portion size
hamburgerPotatosaladBrocolliApple 2365

Expected Output

FoodItem Portion Size
hamburger 2
potato salad 3
Brocolli 6
Apple 5

Answer Source

You need to add a new tr when adding data to your table. This can be done like this:

$(document).ready(function() {
  var food = ['hamburger', 'Potato salad', 'Brocolli', 'Apple pie'];
  var portion = [2, 3, 6, 5];
  for (i = 0; i < food.length; i++) {
    $('#myTable > tbody:last-child').append('<tr><td>' + food[i] + '</td><td>' + portion[i] + '</td></tr>');
<script src=""></script>
<table id="myTable">
      <th>Food Item</th>
      <th>Portion Size</th>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download