Terkadang, kami ingin membuat tabel HTML dengan JavaScript.

Pada artikel ini, kita akan melihat cara membuat tabel HTML dengan JavaScript.

Buat Tabel HTML Menggunakan JavaScript

Kita dapat membuat tabel HTML dengan document.createElementmetode tersebut.

Misalnya, jika kita memiliki HTML berikut:

<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);

Kemudian kita membuat elemen tabel dengan:

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);
}

Kemudian tr.appendChild(td)tambahkan tdsebagai anak terakhir dari tr.

Akhirnya, kami menambahkan tableke dalam divdengan:

div.appendChild(table);

Kita dapat membuat tabel HTML dengan document.createElementmetode tersebut.

Lebih banyak konten di PlainEnglish.io .

Mendaftar untuk buletin mingguan gratis kami . Ikuti kami di Twitter , LinkedIn , YouTube , dan Discord .