[Javascript] 반복문을 이용하여 테이블 동적 생성하기

 

 

for문을 이용하여 테이블 생성하기

for 반복문을 이용해서

테이블을 동적으로 생성하는 예제입니다.

 

const rowCnt = 5;
const columnCnt = 2;

document.write('<table border="1">');
for (let i = 0; i < rowCnt; i++) {
  document.write('<tr>');
  for (let j = 0; j < columnCnt; j++)  {
    document.write('<td>');
    document.write(i + ", " + j);
    document.write('</td>');
  }
  document.write('</tr>')
}
document.write('</table>');

 

테이블은 아래와 같이 가장 바깥을 <table> 태그로 감싸고, 

하나의 row를 표현하는 <tr></tr> 태그,

그리고 그 안의 데이터를 표현하는 <td></td> 태그로 작성할 수 있습니다.

<table>
   <tr> <!-- row(행) -->
      <td>내용1</td> <!-- cell -->
      <td>내용2</td> <!-- cell -->
   </tr>
   <tr>
      <td>내용1</td>
      <td>내용2</td>
   </tr>
</table>

위의 예제는 이러한 테이블을 원하는 행과 열 갯수만큼 만들어주기 위해서

반복문을 사용하여 작성되었습니다.

위 예제의 rowCnt, columnCnt 항목의 숫자를 바꾸면

바꾼 숫자만큼 테이블 행과 열이 늘어나는 것을 확인할 수 있습니다.

 

---

 

 

다른 테이블 관련 내용이 궁금하다면...

[HTML] 기본 테이블(표, Table) 그리기 (table, tr, td, th)

[HTML] 테이블 제목 지정하기, caption tag

[HTML] 테이블(table) 가로, 세로 셀 병합하기 (colspan, rowspan)

[Javascript] 테이블에 행 추가, 삭제하기 (버튼 클릭)

[Javascript] 테이블 합계 계산하기