Bazen JavaScript ile bir HTML tablosu oluşturmak isteriz.

Bu yazıda, JavaScript ile bir HTML tablosunun nasıl oluşturulacağına bakacağız.

JavaScript Kullanarak HTML Tablosu Oluşturma

Yöntemi ile bir HTML tablosu oluşturabiliriz document.createElement.

Örneğin, aşağıdaki HTML'ye sahipsek:

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

Ardından, tablo öğesini şu şekilde oluştururuz:

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

Ardından , öğesinin son çocuğu olarak tr.appendChild(td)ekleyin .tdtr

tableSon olarak, with içine ekleriz div:

div.appendChild(table);

Yöntemi ile bir HTML tablosu oluşturabiliriz document.createElement.

PlainEnglish.io'da daha fazla içerik .

Haftalık ücretsiz bültenimize kaydolun . Bizi Twitter , LinkedIn , YouTube ve Discord'da takip edin .