Una solución más simple y posibleelegante es hacer uso de recursión. De esta manera llamas la funcion con una versión más acotada del arreglo hasta que no haya elementos en el:
// Arreglo inicial
const arr = ["t1", "t2", "t3", "t4", "t5", "t6", "t7", "t8", "t9"];
// Elemento DOM donde van los resultados
const tbody = document.querySelector("tbody");
// Parametros: arreglo, cantidad de columnas y elemento DOM destino
function sliceAndDsiplay(arr, cols, targetElement) {
if (arr.length === 0) {
console.log("arrr", arr.length);
return arr;
}
const tr = document.createElement("tr");
arr.slice(0, cols).forEach(item => {
const td = document.createElement("td");
td.textContent = item;
tr.append(td);
});
targetElement.append(tr);
// Llamada recursiva
return sliceAndDsiplay(arr.slice(cols), cols, targetElement);
}
sliceAndDsiplay(arr, 4, tbody);
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>
</tbody>
</table>