Crea una tabella html dynamic usando javascript da un semplice array

Voglio scrivere qualche JavaScript per creare una semplice tabella HTML da una matrice che contiene solo numeri:

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

La tabella dovrebbe apparire così:

 1 2 3 4 5 6 7 8 9 10 

Ma il codice JavaScript dovrebbe essere dinamico a seconda della dimensione delle matrici (sempre un fattore di 5).

Ho provato un sacco di cose ma non funziona mai come voglio io. Quale sarebbe il modo più semplice per raggiungere questo objective?

Questo è uno dei miei tentativi.

 var tableStart = ""; for (i = 0; i < arraySize/5; i++){ var tableMiddle = "" if (arraySize/5 >= 2) { tableMiddle = tableMiddle + tableMiddle; } }; var tableEnd = "
12345
"; var table = tableStart.concat(tableMiddle, tableEnd);

così come

 var result = ""; for(var i=0; i<2; i++) { result += ""; for(var j=0; j<array.length; j++){ result += ""; } result += ""; } result += "
"+array[i]+"
";

questo si traduce solo in due valori della matrice che viene visualizzata anche se un sacco di volte.

È ansible iterare l’array e creare una nuova riga se il resto con 5 è zero.

 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); }); 
 
 var array = [1,2,3,4,5,6,7,8,9,10]; var result = ""; result += ""; for (var j = 0; j < array.length; j++) { result += ""; if ((j + 1) % 5 == 0) { result += ""; } } result += ""; result += "
" + array[j] + "
"; document.body.innerHTML = result;

Che ne dici di provare qualcosa di simile? Spiegazioni nel codice. Inoltre, non verificato, quindi potrebbe essere necessario apportare alcune modifiche.

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