Een HTML-tabel maken van een array in JavaScript

Stel we hebben een lege tabel:

html<table id="table"></table>

Stel we hebben ook een tweedimensionale array, bijvoorbeeld deze:

javascriptlet arr = [[1, 2, 3, 4], [5, 6, 7, 8], [9, 10, 11, 12]];

Laten we op basis van deze array een HTML-tabel maken, gevuld met de elementen van deze array. Dat betekent dat we een tabel krijgen met drie rijen, in elk waarvan 4 cellen zitten.

Laten we het probleem oplossen met twee geneste for-of loops:

javascriptlet arr = [[1, 2, 3, 4], [5, 6, 7, 8], [9, 10, 11, 12]];
let table = document.querySelector('#table');

for (let subArr of arr) {
  let tr = document.createElement('tr');
  
  for (let elem of subArr) {
    let td = document.createElement('td');
    td.textContent = elem;
    tr.appendChild(td);
  }
  
  table.appendChild(tr);
}

Zoals je ziet, is onze oplossing universeel geworden en hangt het niet af van het aantal subarrays en het aantal elementen in elke subarray. De enige voorwaarde is dat de subarrays hetzelfde aantal elementen moeten hebben.

javascriptlet arr = [[1, 2, 3], [4, 5, 6], [7, 8, 9], [10, 11, 12]];