Intentando con métodos de arreglos:
Al final, resultó más simple de lo que esperaba, como se está recorriendo el arreglo, elemento por elemento, no es necesario crear subarreglos, simplemente analizar en qué momento es necesario crear una fila.
O bien, se puede hacer un ciclo por filas a crear, usando arr.slice()
para obtener los elementos correspondientes.
Nota: Revisa los comentarios al final del código javascript, son solo funciones de arreglos; un poco complicada la forma de obtener los fragmentos (chunks), pero se aplica la misma idea del ejemplo previo... en una sola línea.
const cols = 4;
const arr = ['t1', 't2', 't3', 't4', 't5', 't6', 't7','t8','t9'];
const tBody = document.getElementById('table-content');
// Contador de celdas y elemento de nueva fila
// se deben declarar fuera del ciclo
// para no sobrescribir en cada iteración
let col;
let newRow;
arr.forEach((row, index) => {
// Crear fila al empezar
// o cuando se completaron las columnas
if(index == 0 || (col % cols) === 0) {
newRow = tBody.insertRow();
// Reiniciar contador de celdas
col = 0;
}
const newCell = newRow.insertCell(col);
newCell.innerText = row;
col ++;
});
// Otra opción, contando filas y usando array.slice
// Saber cuántas filas se van a mostrar
const rows = Math.ceil(arr.length / cols);
const tBody2 = document.querySelector('#table-content2');
for(let row = 0; row < rows; row ++) {
let slc = row * cols;
// Slice requiere posición inicial y final
items = arr.slice(slc, slc + cols);
newRow = tBody2.insertRow();
items.forEach((item, col) => {
const newCell = newRow.insertCell(col);
newCell.innerText = item;
});
}
// new Array - Arreglo con cantidad de filas necesarias
// .fill() - Inicializa cada fila
// .map() - Recorre cada "fila" y llena desde arreglo original
const chunks = new Array(Math.ceil(arr.length / cols)).fill().map((_, i) => arr.slice(i * cols, i * cols + cols));
console.log(chunks);
// Puedes recorrer chunks como filas:
chunks.forEach(items => {
// Aquí agregas la fila
// Recorres items para crear celdas
items.forEach((item, col) => {
// Aquí creas cada celda
});
});
table {
font-family: 'Verdana';
padding: 25px;
}
td {
border: 2px solid rgba(0, 0, 0, 0.08);
color: rgba(0, 0, 0, 0.6);
padding: 25px;
}
<table>
<tbody id="table-content">
</tbody>
</table>
<p>Llenar con array.slice()</p>
<table>
<tbody id="table-content2">
</tbody>
</table>
En lugar de recorrer el arreglo, es más fácil calcular cuántas filas se van a crear y hacer dos ciclos, uno para filas y otro para celdas, actualizando el índice cada que se crea una nueva celda.
let cols = 4;
const arr = ['t1', 't2', 't3', 't4', 't5', 't6', 't7','t8','t9'];
const tBody = document.getElementById('table-content');
// Obtener total de filas
let rows = Math.ceil(arr.length / cols);
// Iniciar con primer elemento
let index = 0;
// Ciclo para filas
for(let row = 0; row < rows; row++) {
// Crear fila
const newRow = tBody.insertRow();
// Ciclo para columnas
for(let col = 0; col < cols; col++) {
// ¿Llegamos al final de arreglo?
if(index >= arr.length) {
// Fin del ciclo
break;
}
// Crear celda
const newCell = newRow.insertCell(col);
newCell.innerText = arr[index];
index ++;
}
}
table {
font-family: 'Verdana';
padding: 25px;
}
td {
border: 2px solid rgba(0, 0, 0, 0.08);
color: rgba(0, 0, 0, 0.6);
padding: 25px;
}
<table>
<tbody id="table-content">
</tbody>
</table>