A veces, queremos crear una tabla HTML con JavaScript.

En este artículo, veremos cómo crear una tabla HTML con JavaScript.

Crear una tabla HTML usando JavaScript

Podemos crear una tabla HTML con el document.createElementmétodo.

Por ejemplo, si tenemos el siguiente HTML:

<div>
</div>

const div = document.querySelector("div");
const table = document.createElement('table');
table.border = '1';
const tableBody = document.createElement('tbody');
table.appendChild(tableBody);
for (let i = 0; i < 3; i++) {
  const tr = document.createElement('tr');
  tableBody.appendChild(tr);
  for (let j = 0; j < 4; j++) {
    const td = document.createElement('td');
    td.width = '75';
    td.appendChild(document.createTextNode(`cell ${i}-${j}`));
    tr.appendChild(td);
  }
}
div.appendChild(table);

Luego creamos el elemento de la tabla con:

const table = document.createElement('table');

table.border = '1';

const tableBody = document.createElement('tbody');

table.appendChild(tableBody);

for (let i = 0; i < 3; i++) {
  const tr = document.createElement('tr');
  tableBody.appendChild(tr);
  for (let j = 0; j < 4; j++) {
    const td = document.createElement('td');
    td.width = '75';
    td.appendChild(document.createTextNode(`cell ${i}-${j}`));
    tr.appendChild(td);
  }
}

const tr = document.createElement('tr');

tableBody.appendChild(tr);

for (let j = 0; j < 4; j++) {
  const td = document.createElement('td');
  td.width = '75';
  td.appendChild(document.createTextNode(`cell ${i}-${j}`));
  tr.appendChild(td);
}

Luego tr.appendChild(td)agregue el tdcomo el último hijo de tr.

Finalmente, agregamos el tableen el divcon:

div.appendChild(table);

Podemos crear una tabla HTML con el document.createElementmétodo.

Más contenido en PlainEnglish.io .

Regístrese para recibir nuestro boletín semanal gratuito . Síganos en Twitter , LinkedIn , YouTube y Discord .