JavaScript 반복문으로 구구단 만들기(table)

javascript로 구구단을 table형식으로 출력해보겠습니다.

 

<script>
    document.write("<table border>");
    document.write("<tr>");
    for(let i = 2; i<=9; i++) {
        document.write("<th>" + i + "단</th>");    
    }
    document.write("</tr>");
    document.write("<tr>");
    for(let i = 1; i <= 9; i++) {
        for(let j = 2; j<=9; j++) {
            document.write("<td>" + j + "*" + i + "=" + i * j + "</td>");    
        }
        document.write("</tr>");
    }
    document.write("</table>");
    document.write("<hr>");
</script>
<style>
    table { border-collapse: collapse; }
</style>

아래는 출력결과입니다.

2중 for문으로 2*1=2, 3*1=3 .... 9*1=9와 같이 숫자 1은 고정, 2부터9까지 숫자가 다 달하면 고정숫자 1은 2로 증가함과 동시에 줄넘김을 하는(<tr>태그)형식으로 전개했습니다.

 

또한 style에서 border-collapse : collapse 를 통해 테두리 사이의 간격을 없앰과 동시에 겹치는 부분을 한 줄로 표시했습니다

 

이상 javascript를 통해 body 태그의 입력없이 sciript로 구구단을 출력해보는 방법이었습니다.