如何使用Jquery水平地和在一些元素之后垂直地打印表格中的数组元素？

Question

I have array with numbers. if I am printing array in table in rows it prints all elements horizontally but I want to print array like 3 elements horizontally and then again at next line 3 elements horizontally, my Jquery is:

$.get("",{id:$(this).val()}, function(data){
  for (var i = 0; i < data.length; i++) {
    drawRow(data[i]);
  }
  function drawRow(rowData) {
    var row = $("<th />")
    row.empty();
    $("#delDish").append(row);
    row.append($("<button class='btn btn-lg btn-success' value='"+ rowData.item_id +"'>" + rowData.item_name + "</button>"));                
  } });

what i need is aaray should be print like:

<table>
<tr>
 <td></td>
 <td></td>
 <td></td>
</tr>
<tr>
 <td></td>
 <td></td>
 <td></td>
</tr>
<tr>
 <td></td>
 <td></td>
 <td></td>
</tr>
</table>

how to do it using Jquery ?

Answer 1

Check out this JSBin: http://jsbin.com/wayotejatu/edit?html,js,output

First, populating the data array with some dummy data:

var data = [
    { item_id: 1, item_name: 'a' },
    { item_id: 2, item_name: 'b' },
    { item_id: 3, item_name: 'c' },
    { item_id: 4, item_name: 'd' },
    { item_id: 5, item_name: 'e' },
    { item_id: 6, item_name: 'f' },
    { item_id: 7, item_name: 'g' }
];

Then, looping through the data, create a new row only if the row index is a multiplication of three:

if (i % 3 === 0) {
    row = $('<tr />');
    $("#delDish tbody").append(row);
}

Then, in the drawRow function, always appending to the last row $("#delDish tbody tr:last-child")

Please notice the HTML structure is a bit different than the original one in the question:

<table id="delDish">
    <tbody></tbody>
</table>