JavaScript로 HTML 테이블 생성 함수

이제 createTable 함수를 만들어 보겠습니다. 이 함수는 지정된 크기의 테이블을 생성하여 지정된 요소의 끝에 추가할 것입니다.

첫 번째 매개변수로 행의 개수를, 두 번째 매개변수로 열의 개수를, 세 번째 매개변수로는 테이블이 생성될 DOM 요소에 대한 참조를 받도록 하겠습니다.

함수가 생성되면 어떻게 사용할지 살펴보겠습니다. 예를 들어, 다음과 같은 div가 주어졌다고 가정해 보겠습니다.

html<div id="elem"></div>

이 div 안에 3행 4열의 테이블을 만들어 보겠습니다.

javascriptlet div = document.querySelector('#elem');
createTable(3, 4, div);

이제 두 개의 div가 주어졌다고 가정해 보겠습니다.

html<div id="elem1"></div>
<div id="elem2"></div>

각 div에 자체 테이블을 만들어 보겠습니다.

javascriptlet div1 = document.querySelector('#elem1');
createTable(3, 4, div1);

let div2 = document.querySelector('#elem2');
createTable(5, 6, div2);

생성된 테이블이 바로 보이도록 하기 위해 다음과 같은 CSS를 추가할 수 있습니다.

csstd {
  width: 50px;
  height: 50px;
  border: 1px solid black;
}

javascriptfunction createTable(rows, cols, parent) {
  let table = document.createElement('table');
  
  // 여기에 rows행과 cols열을 가진 테이블을 생성합니다.
  for () {
    for () {
      
    }
  }
  
  parent.appendChild(table);
}