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