Đôi khi, chúng tôi muốn tạo một bảng HTML bằng JavaScript.

Trong bài viết này, chúng ta sẽ xem cách tạo bảng HTML bằng JavaScript.

Tạo một bảng HTML bằng JavaScript

Chúng ta có thể tạo một bảng HTML bằng document.createElementphương thức.

Chẳng hạn, nếu chúng ta có HTML sau:

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

Sau đó, chúng tôi tạo phần tử bảng với:

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

Sau đó tr.appendChild(td)thêm cái tdlàm con cuối cùng của tr.

Cuối cùng, chúng tôi thêm tablevào divvới:

div.appendChild(table);

Chúng ta có thể tạo một bảng HTML bằng document.createElementphương thức.

Thêm nội dung tại PlainEnglish.io .

Đăng ký nhận bản tin miễn phí hàng tuần của chúng tôi . Theo dõi chúng tôi trên Twitter , LinkedIn , YouTube và Discord .