JavaScript 입문 : 테이블 그리기

다음과 같이 3 by 3 테이블을 만들고자 하면 두가지 방법을 사용할 수 있습니다. 

 

 

첫번째는 다음과 같이 HTML / CSS에서 만들 수 있습니다. 

 

 

두번째는 이러한 내용을 자바스크립트내에서 3 by 3 표로 만들수 있습니다.  

 

 

<script> 태그에서 작업합니다. 

 

① 테이블 태그에 사용되는 <table>, <tr>, <td> 태그를 document 객체를 이용하여 만듭니다. 

② 먼저 <tr>태그를 반복문을 통하여 만듭니다. 

③ <td> 태그를 반복문을 통하여 만듭니다. 

④ 활성화된 태그(데이터)를 화면에 반영힙니다.  

 

즉, 3 by 3 테이블은 이중구조이며 이중 반복문으로 보면 됩니다. tr은 한줄, 두줄 하는 rows를 말하고 먼저 그려지는 기준점입니다. 

 

다음과 같이 작업할 수 있습니다. 

 

 

중요한 점을 정리하자면 

 

태그를 만들어 가는 과정은 부모 >> 자식 태그순이입니다. append( )를 사용하기 위해서는 태그가 활성화가 되어 있어야 합니다. createElement(  )가 선행이 되었기에 가능합니다.