Home / Questions / 376151
Accepted
Ray
Asked: 2020-07-25 21:37:38 +0800 CST 2020-07-25 21:37:38 +0800 CST

How can I draw an array as a table in javascript?

  • 772

I have the following arrangement

const arr = ['t1', 't2', 't3', 't4', 't5', 't6', 't7','t8','t9'];

I would like to display it as follows, i.e. limit it to 4 columns and N rows:

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>
    <tr>
      <td>t1</td>
      <td>t2</td>
      <td>t3</td>
      <td>t4</td>
    </tr>
    <tr>
      <td>t5</td>
      <td>t6</td>
      <td>t7</td>
      <td>t8</td>
    </tr>
    <tr>
      <td>t8</td>
    </tr>
  </tbody>
</table>

I'm trying this but what happens is that it repeats the elements to me a lot of times and I can't solve it:

let cols = 4;
const arr = ['t1', 't2', 't3', 't4', 't5', 't6', 't7','t8','t9'];
const tBody = document.getElementById('table-content');


arr.forEach((row) => {
  let i = 0;
  const itemsToRender = arr.slice(i, cols);
  
  if (i === 0) {
      i = cols;
  } else {
      cols *= 2;
      i = cols / 2;
  }
    
  const newRow = tBody.insertRow();
  
  itemsToRender.forEach((col, index) => {
    const newCell = newRow.insertCell(index);
    const cellValue =  document.createTextNode(row);
    newCell.appendChild(cellValue);
  });
  
});
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>

javascript

2 Answers

  1. Best Answer

    Trying with array methods:

    In the end, it turned out to be simpler than I expected, since we are traversing the array, element by element, it is not necessary to create subarrays, simply analyze when it is necessary to create a row.

    Or, you can loop by rows to create, using arr.slice()to get the corresponding elements.

    Note: Check the comments at the end of the javascript code, they are just array functions; The way to get the chunks is a bit complicated , but the same idea of ​​the previous example applies... in a single line.

    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>

    Instead of looping through the array, it's easier to figure out how many rows to create and do two loops, one for rows and one for cells, updating the index every time a new cell is created.

    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>

    • 4

  2. A simpler and more elegant solution is to make use of recursion . This way you call the function with a narrower version of the array until there are no elements in it:

    // 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>

    • 0