Javascript 如何在 <table> 标签内显示数组值？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12178792/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to display array values inside <table> tag?
提问by Maayi
I have array values like this. I want to display these values in HTML table tag
我有这样的数组值。我想在 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>
How to display values of array inside the div or table tag ???
如何在 div 或 table 标签内显示数组的值？？？
回答by pimvdb
orderArray's items represent <tr>elements, and each item inside represents a <td>element. So you can loop through orderArraycreating <tr>s, and then loop through its elements on each loop creating <td>s: http://jsfiddle.net/h7F7e/.
orderArray的items代表<tr>元素，里面的每一个item代表一个<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);
});
回答by Manse
Something like this would create a dynamic table for you :
这样的事情会为你创建一个动态表：
// 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);
Uses document.createElement()and element.appendChild()
回答by Bergi
Use the DOM functions of 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;
}
Call that function when the DOM is ready, and append the returned table somewhere.
当 DOM 准备好时调用该函数，并将返回的表附加到某处。
回答by David Houde
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
