使用简单数组中的 javascript 创建动态 html 表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/50113999/
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
Create dynamic html table using javascript from simple array
提问by Alexander Hoerl
I want to write some JavaScript to create a simple HTML table from an array that just contains numbers:
我想编写一些 JavaScript 来从一个只包含数字的数组创建一个简单的 HTML 表：
var array = [1,2,3,4,5,6,7,8,9,10];
The table should look like this:
该表应如下所示：
1 2 3 4 5
6 7 8 9 10
But the JavaScript code should be dynamic depending on the arrays size (always a factor of 5 though).
但是 JavaScript 代码应该是动态的，具体取决于数组的大小（尽管总是 5 倍）。
I've tried a lot of stuff but it never works the way i want it to. What would be the easiest way to achieve this?
我尝试了很多东西，但它从来没有像我想要的那样工作。实现这一目标的最简单方法是什么？
This is one of my tries.
这是我的尝试之一。
var tableStart = "<table border>";
for (i = 0; i < arraySize/5; i++){
var tableMiddle = "<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>"
if (arraySize/5 >= 2) {
tableMiddle = tableMiddle + tableMiddle;
}
};
var tableEnd = "</table>";
var table = tableStart.concat(tableMiddle, tableEnd);
as well as
也
var result = "<table border=1>";
for(var i=0; i<2; i++) {
result += "<tr>";
for(var j=0; j<array.length; j++){
result += "<td>"+array[i]+"</td>";
}
result += "</tr>";
}
result += "</table>";
this one just results in two values of the array being displayed though a lot of times.
这只会导致多次显示数组的两个值。
回答by Nina Scholz
You could iterate the array and build a new row if the remainder with 5 is zero.
如果 5 的余数为零，您可以迭代数组并构建一个新行。
var array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
tr;
array.forEach((v, i) => {
var td = document.createElement('td');
if (!(i % 5)) {
tr = document.createElement('tr');
document.getElementById('table0').appendChild(tr);
}
td.appendChild(document.createTextNode(v));
tr.appendChild(td);
});<table id="table0"></table>回答by Taylor Rahul
var array = [1,2,3,4,5,6,7,8,9,10];
var result = "<table border=1>";
result += "<tr>";
for (var j = 0; j < array.length; j++) {
result += "<td>" + array[j] + "</td>";
if ((j + 1) % 5 == 0) {
result += "</tr><tr>";
}
}
result += "</tr>";
result += "</table>";
document.body.innerHTML = result;Please give it a try if that works
如果有效，请试一试
回答by itamar
How about trying something like this? Explanations in the code. Also, untested so you might need to make some adjustments.
尝试这样的事情怎么样？代码中的说明。此外，未经测试，因此您可能需要进行一些调整。
var array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
// start the table
var table = document.createElement("table");
var currentRow;
for (var i = 0; i < array.length; i++) {
// put items in.
var item = document.createElement("td");
item.innerHTML = array[i];
// if we are at the
if (i % 5 === 0) {
// if it's not the first time you're creating row - first put the prev row into the table, then reassign it to a new table row.
if (typeof currentRow !== 'undefined') table.appendChild(currentRow);
currentRow.appendChild(item);
currentRow = document.createElement("tr");
}
}
// put the table into the body element, for example.
document.getElementsByTagName('body')[0].appendChild(table);
