[자바스크립트] 자바스크립트를 이용한 구구단 생성
2022. 1. 26. 14:04ㆍJavaScript/study
gugudan.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>
<link rel="stylesheet" href="./res/css/gugudan.css">
</head>
<body>
<table id="gugudan">
</table>
<script src="./res/js/gugudan.js"></script>
</body>
</html>gugudan.js
const renderGugudan = function(){
const gugudanTable = document.querySelector("#gugudan");
const thead = document.createElement("thead");
const tbody = document.createElement("tbody");
let tr, th, td;
// header
tr = document.createElement("tr");
for(let i=2; i<=9;i++)
{
th = document.createElement("th");
th.textContent = i+"단";
tr.appendChild(th);
}
thead.appendChild(tr);
// body
for(let i=1; i<=9; i++)
{
tr = document.createElement("tr");
for(let j=2; j<=9; j++)
{
td = document.createElement("td");
td.textContent = j+" * "+i+" = "+(j*i);
tr.appendChild(td);
}
tbody.appendChild(tr);
}
gugudanTable.appendChild(thead);
gugudanTable.appendChild(tbody);
}
renderGugudan();
gugudan.css
html,
body {
height: 100%;
margin: 0;
}
#gugudan {
width: 100%;
border: 1px solid black;
border-collapse: collapse;
text-align: center;
}
#gugudan thead {
background-color: #e2efda;
}
#gugudan tbody tr:nth-child(even) {
background-color: #f2f2f2;
}
#gugudan th,
#gugudan td {
border: 1px solid black;
}
실행결과
'JavaScript > study' 카테고리의 다른 글
| [자바스크립트] ES6 모듈 내보내기/가져오기(Export/Import) (0) | 2022.02.02 |
|---|---|
| [자바스크립트] 비동기 처리방식을 수행하는 콜백함수, Promise, async/await (0) | 2021.11.15 |