본문 바로가기
Front

[Javascript] 테이블을 이용한 구구단 3단씩 출력하기

by bkuk 2022. 9. 15.

 

화면 출력

 

전체 소스코드

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
        <style>
            #outter table, td {
                border: 1px solid black;
                border-collapse: collapse;
            }
            #inner table, td {
                width: 150px;
                border: 1px dotted red;
                border-collapse: collapse;
            }
        </style>
    <script>
        //선언문
        const gugudan = function (whatDan) {
            let result ="";
            result += "<table id = 'outter'>";
            for(i = 1; i <= 9; i++) {
                result += "<tr>";
                result += "<td>" + whatDan + 'X' + i + "=" + (whatDan * i) + "</td>";
                result += "</tr>";
            }  
                result += "</table>";
                return result;
        }
    </script>
</head>
<body>
    <script>
            let whatDan= 1;
            document.write("<table id = 'inner'>");
            for(row = 1; row <= 3; row++){
                document.write("<tr>");
                for(col =1; col <=3; col++){
                    document.write("<td>" + gugudan(whatDan)+ "</td>");
                    whatDan++;
                }   document.write("</tr>");
            }   document.write("</table>");
    </script>
</body>
</html>

 

댓글