how to display array values inside <table> tag?

Question

I have array values like this. I want to display these values in HTML table tag

<script type="text/javascript">
var orderArray = [
    ["1","29-Aug-2012", "Product1", "client1"],
    ["2","29-Aug-2012", "Product2", "client2"],
    ["3","29-Aug-2012", "Product3", "client3"],
    ["4","29-Aug-2012", "Product4", "client4"],
    ["5","29-Aug-2012", "Product5", "client5"]
    ];

function display()
{
    for(i=0;i<ordertArray.length;i++)
    {
    //How to display values of array inside the div or table tag ???
    }
}

</script>

How to display values of array inside the div or table tag ???

Answer 1

orderArray's items represent <tr> elements, and each item inside represents a <td> element. So you can loop through orderArray creating <tr>s, and then loop through its elements on each loop creating <td>s: http://jsfiddle.net/h7F7e/.

var table = document.getElementById("table");  // set this to your table

var tbody = document.createElement("tbody");
table.appendChild(tbody);
orderArray.forEach(function(items) {
  var row = document.createElement("tr");
  items.forEach(function(item) {
    var cell = document.createElement("td");
    cell.textContent = item;
    row.appendChild(cell);
  });
  tbody.appendChild(row);
});