บางครั้งเราต้องการสร้างตาราง HTML ด้วย JavaScript

ในบทความนี้ เราจะดูวิธีสร้างตาราง HTML ด้วย JavaScript

สร้างตาราง HTML โดยใช้ JavaScript

เราสามารถสร้างตาราง HTML ด้วยdocument.createElementเมธอด

ตัวอย่างเช่น ถ้าเรามี 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);

จากนั้นเราสร้างองค์ประกอบตารางด้วย:

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

จากนั้นtr.appendChild(td)เพิ่มtdเป็นลูกคนสุดท้ายของtr.

สุดท้าย เราเพิ่ม the tableลงในdiv:

div.appendChild(table);

เราสามารถสร้างตาราง HTML ด้วยdocument.createElementเมธอด

เนื้อหาเพิ่มเติมที่PlainEnglish.io

สมัครรับจดหมายข่าวรายสัปดาห์ฟรีของ เรา ติดตามเราได้ที่Twitter , LinkedIn , YouTubeและDiscord