때로는 JavaScript로 HTML 테이블을 만들고 싶을 때가 있습니다.

이 기사에서는 JavaScript로 HTML 테이블을 만드는 방법을 살펴보겠습니다.

JavaScript를 사용하여 HTML 테이블 만들기

메서드 를 사용하여 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)추가합니다 .tdtr

table마지막으로 다음을 with 에 추가합니다 div.

div.appendChild(table);

메서드 를 사용하여 HTML 테이블을 만들 수 있습니다 document.createElement.

PlainEnglish.io 에 더 많은 내용이 있습니다 .

무료 주간 뉴스레터를 신청하십시오 . Twitter , LinkedIn , YouTube 및 Discord 에서 팔로우하세요 .