[자바스크립트] 반복문으로 테이블 만들기

먼저 코드부터 올리고 시작하겠슴다~

 

<script>
    let num = 1;
    let t = "<table border=1>";

    for ( let i = 1 ; i <= 5; i++ ) {
      t += "<tr>";
      for ( let j = 1 ; j <= 5; j++) {
        t += "<td>" + num + "</td>";
        num++;
      }
      t += "</tr>";
    }

      t += "</table>";
    console.log(t);
    document.write(t);
  </script>

보다시피, 해당 문제를 못풀어서 올렸는데, 이유를 분석해보자.

 

for ( let i = 1 ; i <= 5; i++ ) {
      t += "<tr>";
    }

일단 이 부분을 그냥 반복할 수 있다는 것을 처음 알았음 ㅎ....

 

반복하면

<table border=1>
	<tr>
    	<td> num </td>
    	<td> num </td>        
    	<td> num </td>        
    	<td> num </td>        
    	<td> num </td>
    </tr>
    <tr>
    	<td> num </td>
    	<td> num </td>        
    	<td> num </td>        
    	<td> num </td>        
    	<td> num </td>
    </tr>
    <tr>
    	<td> num </td>
    	<td> num </td>        
    	<td> num </td>        
    	<td> num </td>        
    	<td> num </td>
    </tr>
    <tr>
    	<td> num </td>
    	<td> num </td>        
    	<td> num </td>        
    	<td> num </td>        
    	<td> num </td>
    </tr>
    <tr>
    	<td> num </td>
    	<td> num </td>        
    	<td> num </td>        
    	<td> num </td>        
    	<td> num </td>
    </tr>
 </table>

이렇게 설정됨을 인지하였고,

 

let num = 1;

"num++;"

 

으로 인하여 1 ~ 25 까지 +1씩 증가하여 테이블의 행과 열의 순서에 맞게 기록됨을 알 수 있었음.

 

* 교훈 : 반복문 안에 똑같은 문장을 반복할수 있다!