<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>exam02_구구단.html</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
<script>
'use strict';
function forCheck() {
let startDan = parseInt(document.getElementById("startDan").value);
let endDan = parseInt(document.getElementById("endDan").value);
let su = parseInt(document.getElementById("su").value);
let temp = "";
let str = "<table>";
let cnt = "";
let res;
if(startDan > endDan) {
temp = startDan;
startDan = endDan;
endDan = temp;
}
str += "<tr>"
for(let i=startDan; i<=endDan; i++){
cnt++;
str += `<td>**${i} 단**<br/>`;
for(let j=1; j<=9; j++){
str += `${i} * ${j} = ${i*j}<br/>`;
}
str += "</td>";
if(cnt % su == 0) str += "</tr>"
}
demo.innerHTML = str;
}
</script>
<style>
table {
margin: 0 auto;
text-align: center;
border: 1px solid gray;
}
td {
border: 1px solid gray;
padding: 60px;
}
</style>
</head>
<body>
<div class="container">
<h2>구구단 지정열대로 출력하기</h2>
<pre>
출력할 구구단의 시작단과 끝단을 입력받고, 또 한 행에 출력할 열의 수를 입력받은 후,
조건에 맞도록 구구단을 출력하시오.(단, 시작단이 항상 작도록 처리하시오)
</pre>
<p> 시작단을 입력하세요.
<input type="number" name="startDan" id="startDan" value="2" min="1" class="form-control" autofocus required />
</p>
<p> 끝단을 입력하세요.
<input type="number" name="endDan" id="endDan" value="9" class="form-control" required />
</p>
<p>한 행에 출력할 열의 수를 입력하세요.
<input type="number" name="su" id="su" value="2" class="form-control" required />
</p>
<p>
<input type="button" value="구구단 출력" xxonclick="forCheck()" class="btn btn-success form-control mb-2" />
<input type="button" value="초기화" xxonclick="location.reload()" class="btn btn-warning form-control" />
</p>
<div id="demo"></div>
</div>
</body>
</html>
첫댓글 테이블을 이용한 제어방법은 div태그와 같이 자주 쓰입니다. 잘 하셨어요. 수고하셨습니다.