728x90
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>연습문제 2</title>
<style>
form {
width: 700px;
height: 900px;
text-align: center;
margin: auto;
padding: 50px;
border: 1px solid #ccc;
}
input[type="text"] {
width:50px;
height:30px;
text-align: center;
font-size: 1.0em;
font-weight: bold;
}
button {
margin-left:10px;
}
table {
width:500px;
}
table, td {
margin:30px auto;
border:1px solid #ccc;
border-collapse: collapse;
}
td {
padding:10px;
}
</style>
</head>
<body>
<form>
<input type="text" id="rowN" value="1"> 행
<input type="text" id="colN" value="1"> 열
<button onclick="drawTable(); return false;">작성</button>
<div id="dTable"></div>
</form>
<script>
function drawTable(){
var rowN = document.querySelector("#rowN").value;
var colN = document.querySelector("#colN").value;
var newT = document.createElement("table");
for(i=1; i<=rowN; i++){
var newR = document.createElement("tr");
for(j=1; j<=colN; j++){
var newC = document.createElement("td");
var newText = document.createTextNode( i + " 행 " + j + "열");
newC.appendChild(newText);
newR.appendChild(newC);
}
newT.appendChild(newR);
}
var dTable = document.querySelector("#dTable");
dTable.appendChild(newT);
}
</script>
</body>
</html>
728x90
'JAVA > 연습장!' 카테고리의 다른 글
| 삼항연산자 문제 (0) | 2023.01.05 |
|---|---|
| Vue.js 연습장! (0) | 2022.12.28 |
| DOM 응용해서 클릭때 마다 속성바꾸기 (0) | 2022.12.20 |
| 조건문 연습문제 (0) | 2022.12.14 |
| 클래스 , class 연습문제! (0) | 2022.12.13 |