04_구구단.html
2.04 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
window.onload = function() {
document.getElementById("sel").onchange = function() {
//sel = document.getElementById('frm').get
sel = frm.sel.options[frm.sel.selectedIndex].value; //select의 선택한 value값을 출력
dansu = frm.sel.options[frm.sel.selectedIndex].text; //select의 선택한 택스트를 출력
alert(sel);
// 몇 단인지 뿌려주는 부분-----------------------------------
var th = document.createElement("th");
var text = document.createTextNode(dansu);
th.appendChild(text);
document.getElementById("myTbody").appendChild(th);
// 몇 단인지 뿌려주는 부분-----------------------------------
for(i = 1; i <= 9; i++) {
addRow(sel, i);
}
}
document.getElementById("btnCle").onclick = function() {
var re = document.getElementById("myTbody");
while(re.hasChildNodes()) {
re.removeChild(re.childNodes[0]);
}
}
}
function addRow(dan,dansu) {
var row = document.createElement("tr");
var col = addCol(sel,i);
row.appendChild(col);
document.getElementById("myTbody").appendChild(row);
}
function addCol(dan,i) {
//alert(i);
var col = document.createElement("td");
var text = document.createTextNode(sel + " * " + i + " = " + (sel * i));
col.appendChild(text);
return col;
}
</script>
</head>
<body>
<h2>** 구구단 출력 **</h2>
<form action="#" name="frm">
단 :
<select name="sel" id="sel">
<option value="">선택</option>
<option value="1">1단</option>
<option value="2">2단</option>
<option value="3">3단</option>
<option value="4">4단</option>
<option value="5">5단</option>
<option value="6">6단</option>
<option value="7">7단</option>
<option value="8">8단</option>
<option value="9">9단</option>
</select>
<input type="button" id="btnCle" value="삭제"/>
</form>
<br/>
<span id="header"></span>
<table id ="myTable">
<tbody id="myTbody"></tbody>
</table>
</body>
</html>