Skip to main content
Mejoras gramaticales
Origen Enlace
Juan Marco
  • 799
  • 5
  • 13

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>

Una solución más simple y posible 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>

Una solución más simple y elegante 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) {
    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>

Origen Enlace
Juan Marco
  • 799
  • 5
  • 13

Una solución más simple y posible 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>