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 

четыре числа в строке 1,

Пять чисел в строках 2 и 3,

и 2 числа и неопределенный в строке 4

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>