A volte, vogliamo creare una tabella HTML con JavaScript.

In questo articolo vedremo come creare una tabella HTML con JavaScript.

Crea una tabella HTML usando JavaScript

Possiamo creare una tabella HTML con il document.createElementmetodo.

Ad esempio, se abbiamo il seguente codice 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);

Quindi creiamo l'elemento table 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);
}

Quindi tr.appendChild(td)aggiungi tdcome ultimo figlio di tr.

Infine, aggiungiamo tablein the divcon:

div.appendChild(table);

Possiamo creare una tabella HTML con il document.createElementmetodo.

Altri contenuti su PlainEnglish.io .

Iscriviti alla nostra newsletter settimanale gratuita . Seguici su Twitter , LinkedIn , YouTube e Discord .