使用来自简单数组的 javascript 创建动态 html 表

Question

我想编写一些 JavaScript 以从仅包含数字的数组创建一个简单的 HTML 表格：

 var array = [1,2,3,4,5,6,7,8,9,10];

该表应如下所示：

 1 2 3 4 5
6 7 8 9 10

但是 JavaScript 代码应该是动态的，具体取决于数组大小（虽然总是 5 倍）。

我已经尝试了很多东西，但它从来没有按照我想要的方式工作。实现这一目标的最简单方法是什么？

这是我的尝试之一。

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

也

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

这个只是导致数组的两个值被显示了很多次。

原文由 Alexander Hörl 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

原文由 Nina Scholz 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

 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;

如果可行，请尝试一下

原文由 Taylor Rahul 发布，翻译遵循 CC BY-SA 3.0 许可协议