JavaScript/실습

실습 - 자리배치도만들기

yunajoe 2023. 1. 7. 10:40

입장객은 몇 명인가요? 한 줄에 몇 명씩 앉습니까? 라는 두개의 Prompt를 띄우고

자리배치도를 화면에 띄우기 

 

나의풀이

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body id="body">
    <h2 id="seats">자리배치도</h2>
    <script>                  
        var total = prompt('입장객은 몇 명인가요?');  // type은 string이다.
        var colNum = prompt('한 줄에 몇 명씩 앉습니까?');  // type은 string이다.   
        // let rowNum = Math.ceil(total / colNum);  // type은 Number이다. stirng이 나눠지다니? ㅎ....... 
        colNum = parseInt(colNum)

        var rowNum = Math.ceil(total / colNum);


        // tabale & tbody 태그 생성하기 
        let table = document.createElement('table');
        let thead = document.createElement('thead');
        let tbody = document.createElement('tbody');

        table.appendChild(thead);
        table.appendChild(tbody);

        // Adding the entire table to the body tag
        document.getElementById('body').appendChild(table);

        for(let i=0; i< rowNum; i++){
            let row = document.createElement('tr'); 
            tbody.appendChild(row); 
            for(let j=1; j<=colNum; j++){ 
                let col = document.createElement('td'); 
                let seatNum = i * colNum + j         
                col.innerHTML =`좌석${seatNum}`
                row.appendChild(col); 
            }

        }         

        

    </script>
    
</body>
</html>

 

해설풀이

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>자리배치도</h1>
    <script>
        var memNum = prompt("입장객은 몇 명인가요?");
        var colNum = prompt("한줄에 몇명씩 앉습니까?!");   
        var rowNum; 
        
        if(memNum % colNum == 0){
            rowNum = parseInt(memNum / colNum);
        }else{
            rowNum = parseInt(memNum/ colNum) +1;
        }  
        // table만들기 
        document.write("<table>"); 
            for(i =0; i< rowNum; i++){
                document.write("<tr>"); 
                for(j=1; j<= colNum; j++){
                seatNo = i * colNum + j; 
                if(seatNo > memNum) break;
                document.write("<td>좌석" + seatNo + "</td>");  
            }
            document.write("</tr>"); 
        }  
        document.write("</table>");
    </script>  
</body>
</html>