如何在 <table> 标签内显示数组值？

Question

我有这样的数组值。我想在 HTML 表格标签中显示这些值

<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>

如何在 div 或 table 标签内显示数组的值 ???

Answer 1

orderArray 的项目代表<tr> 元素，其中的每个项目代表一个<td> 元素。所以你可以循环通过orderArray创建<tr>s，然后在每个循环上循环其元素创建<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);
});

Answer 2

这样的事情会为你创建一个动态表：

// get handle on div
var container = document.getElementById('container');
// create table element
var table = document.createElement('table');
var tbody = document.createElement('tbody');
// loop array
for (i = 0; i < orderArray.length; i++) {
    // get inner array
    var vals = orderArray[i];
    // create tr element
    var row = document.createElement('tr');
    // loop inner array
    for (var b = 0; b < vals.length; b++) {
        // create td element
        var cell = document.createElement('td');
        // set text
        cell.textContent = vals[b];
        // append td to tr
        row.appendChild(cell);
    }
    //append tr to tbody
    tbody.appendChild(row);
}
// append tbody to table
table.appendChild(tbody);
// append table to container
container.appendChild(table);

使用document.createElement() 和element.appendChild()

Working example here

Answer 3

使用table elements的DOM函数：

function display() {
    var table = document.createElement("table");
    for (var i=0; i<orderArray.length; i++) {
        var row = table.insertRow();
        for (var j=0; j<orderArray[i].length; j++) {
            var cell = row.insertCell();
            cell.appendChild(document.createTextNode(orderArray[i][j]));
        }
    }
    return table;
}

当 DOM 准备好时调用该函数，并将返回的表附加到某处。

Answer 4

var table = "<table>"; // Open Table

for(i=0; i<orderArray.length; i++)
{
 table += "<tr>"; // Open Row

 for(i2=0; i2<orderArray[i].length; i2++) {
 {
  table += "<td>" + orderArray[i][i2] + "</td>"; // Each Column
 }

 table += "</tr>"; // Close Row
}

table += "</table>"; // Close Table