본문 바로가기
Front

[Javascript] 테이블 별찍기와 구구단표 출력

by bkuk 2022. 9. 14.

   // row = 실행문 줄
   // nbsp = 공백
   // star = *
   
   <script>
   	// 내용 정리 
        // 1. 반복문 row를 통해 Loop당 실행 1줄 생성
        // 2. row가 1회 반복되면 nbsp가 1개씩 감소한다. 
        // 3. row가 1회 반복되면 star가 ((row * 2) -1)개씩 증가한다.
        
        for( row = 1; row <= 6; row++){
            let result ="";
            for(nbsp = 1; nbsp <= 6 - row; nbsp++){
                result = result + "&nbsp";
            }
            for(star =1; star <= ((row * 2) - 1); star++) {
                result += "*";
                        
             }
            document.write(result +"</br>");
        }

    </script>

 

 

 

 

<script type="text/javascript">
    document.write("<table>");
        // tr 루프 1개  => row 구문 
        // td 루프 1개  => col 구문
    for(let row = 1; row <= 10; row++){
        document.write("<tr>");
        for(let col =1; col <=10; col++) {
            document.write("<td>"*"</td>");
        }
        document.write("</tr>");
    }   document.write("</table>");
</script>

 

<script type="text/javascript">
    // 테이블 생성 -> 별생성
    // if(row마다 별하나씩 생성)

    document.write("<table border = '1'>");
    document.write("<tr>");

    for(let row = 1; row <= 10; row++){


        // row 1일떄는 col 1 ~ 10
        // row 2일떄는 col 2 ~ 10
        // ...

        for( let col = 1; col <= 10; col++){
            if(row < col){
                document.write("<td></td>");
            } else {
                document.write("<td>*</td>");
            }
        }
        document.write("</tr>");
    }   document.write("</table>");

</script>

// 테이블 생성 -> 별생성
// if(row마다 별하나씩 생성)

document.write("<table border = '1'>");

for(let row = 1; row <= 10; row++){
    document.write("<tr>");

    for( let col = 1; col <= 10; col++){
        if(col >= 11 - row){
            document.write("<td>*</td>");
        } else {
            document.write("<td></td>");
        }
    }
    document.write("</tr>");
}   document.write("</table>");

 

 

<script>
    let result = "";
    result += "<table>";

        for(i = 1; i <= 9; i++) {
            result += "<tr>";

            for(j = 1; j <= 9; j++){
                result += "<td>" + i + "X" + j + "=" + (i * j) + "</td>";
            }
            result += "</tr>";
        }
        result += "</table>";

        document.write(result);
</script>

 

    <script>
        let result = "";
        result += "<table>";
        
            for(i = 0; i <= 9; i++) {
                result += "<tr>";

                for(j = 0; j <= 9; j++){

                    if( i == 0 && j == 0  ) {
                        result += "<td> </td>";
                    }

                    if( i == 0 && j >= 1  ) {
                        result += "<td>" +  "X" + j + "</td>";
                    }

                    if( j == 0 && i >= 1  ) {
                        result += "<td>" +  i + "단" + "</td>";
                    }

                    if( i >= 1 && j >= 1 ) {
                        result += "<td>" + i + "X" + j + "=" + (i * j) + "</td>";
                    }


                }

                result += "</tr>";
            }
            result += "</table>";

            document.write(result);
    </script>

댓글