Javascript:从数组创建表

Question

我有一个 HTML 表格:

<table>
<tr id="0"></tr>
<tr id="1"></tr>
<tr id="2"></tr>
<tr id="3"></tr>
</table>

然后，我创建一个包含 16 个数字的数组，对数组进行洗牌，然后在 Javascript 中为每个数字添加一个单元格。

var numbers = shuffle([1, 1, 2, 2, 3, 3, 4, 4, 5, 5, 6, 6, 7, 7, 8, 8]);
console.log(numbers)

function shuffle(o) {
            for (var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
            return o;
}
function addCell(row, number) {
            var cell = document.getElementById(row).insertCell(0)
            cell.innerHTML = number;
}
function setNumbers() {
    var column = 0;
    var row = 0;
    for (i = 0; i <= numbers.length; i++) {
        column = column + 1;
        if (column > 4) {
            column = 0;
            row = row + 1;
        }
        console.log(row)
        addCell(row, numbers[i]);
    }
}
setNumbers()

函数setNumbers()应创建一个 4 行 4 列的表。它应该创建这样的东西:

5 7 6 2
1 4 3 4
8 3 2 1
5 6 7 8

但是，它创建了这个:

8   5   1   5
6   2   4   6   4
7   2   8   3   1
undefined   3   7

第一行有四个数字，

第 2 行和第 3 行有五个数字，

第 4 行有 2 个数字和一个未定义

Answer 1

处理column的值时存在一个小错误，因为您从第二个循环开始检查column > 4，该行将有5个项目

var numbers = shuffle([1, 1, 2, 2, 3, 3, 4, 4, 5, 5, 6, 6, 7, 7, 8, 8]);
console.log(numbers.length, numbers)

function shuffle(o) {
  for (var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
  return o;
}

function addCell(row, number) {
  var cell = document.getElementById(row).insertCell(0)
  cell.innerHTML = number;
}

function setNumbers() {
  var column = 0;
  var row = 0;
  for (i = 0; i < numbers.length; i++) {
    addCell(row, numbers[i]);
    if (column == 3) {
      column = 0;
      row = row + 1;
    } else {
      column++;
    }
  }
}
setNumbers()

<table>
  <tr id="0"></tr>
  <tr id="1"></tr>
  <tr id="2"></tr>
  <tr id="3"></tr>
</table>