[Javascript] 행(row)과 열(column)을 그리는 프로그램

프로그램을 만들기 전에 table, td, tr 요소의 관계를 생각해야 한다.

td는 tr 요소에 속하며 tr요소는 table 요소에 속한다. 따라서 부모 노드와 자식 노드의 관계를 생각하면 될 것이다.

먼저 프로그램의 뼈대를 구성하는 CSS부터 작성한다.

<style>
    form {
      margin-bottom:30px;
    }
    input[type="text"] {
      width:30px;
      height:20px;
      text-align: center;
    }
    button {
      margin-left:10px;
    }
    table {
      width:300px;      
    }
    table, td {
      border:1px solid #ccc;
      border-collapse: collapse;
    }
    td {
      padding:10px;
    }
</style>

CSS를 작성했다면 화면을 표시하는 HTML을 작성한다.

<form>
    <input type="text" id="rCount" value="1">행 
    <input type="text" id="cCount" value="1">열    
    <button onclick="drawTable(); return false;">작성</button>
</form>

<div id="contents"></div>

drawTable(); 뒤에 return false;를 써둔 이유는 drawTable()함수를 한번만 실행하기 위함이다.

그리고 value는 1로 초기화를 시켜준다.

이제 표를 그리기 위한 Javascript를 작성하기만 하면 프로그램은 완성이다.

Javascript를 작성하기 위한 의사 코드는 다음과 같다.

 

1. table 요소 노드를 만든다.

2. 입력한 행의 개수만큼 반복하면서 tr 요소 노드를 만든다.

3. 입력한 열의 개수만큼 다음 과정을 반복한다.

- td 요소 노드를 만든다.

- 텍스트 노드를 만든다.

- 텍스트 노드를 td 요소 노드의 자식 노드로 만든다.

- td 요소 노드를 tr 요소 노드의 자식 노드로 만든다.

4. tr 요소 노드를 table 요소 노드로 자식 노드로 만든다.

5. table 요소 노드를 필요한 위치에 추가한다.

 

이제 의사 코드를 코드로 변환을 하면

<script>
	function drawTable() {
		var rCount = document.querySelector("#rCount").value;
		var cCount = document.querySelector("#cCount").value;
	
		var tableNode = document.createElement("table");
		for(i = 0; i < rCount; i++) {
			var trNode = document.createElement("tr");
		
			for(j = 0; j < cCount; j++) {
				var tdNode = document.createElement("td");
				var txtNode = document.createTextNode(i + ", " + j);
				tdNode.appendChild(txtNode);
				trNode.appendChild(tdNode);
			}
			tableNode.appendChild(trNode);
		}
	
		var contents = document.querySelector("#contents");
		contents.appendChild(tableNode);
	}
</script>

이와 같은 코드 작성이 가능하다. 

잘 실행이 되는지 확인을 해보자.

잘 실행이 되는 것을 확인할 수 있다.