JSFiddle - React, Tailwind, and code Playground

by wjddyd66

HTML

<h2>구구단 출력</h2>
<form action="#" name="frm">
	단: 
	<select name="sel" id="seldan">
		<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" value="삭제" id="del">
</form>

<br>결과<br>
<table id="myTable" border="1">
	<tbody id="myTbody">
	</tbody>
</table>

JavaScript

function gugu(value){
		var tr=document.createElement("tr");	// <tr>
		for(i=1; i<=9; i++){
			var td=document.createElement("td"); // <td>
			var res=value+"*"+i+"="+value*i;
      var text=document.createTextNode(res);
			td.appendChild(text);
      tr.appendChild(td);
			document.getElementById("myTbody").appendChild(tr);
		}
}

function delGugu(){
	var data=document.getElementById("myTbody");
	while(data.hasChildNodes()){
		data.removeChild(data.childNodes[0])
	}
}

document.getElementById("seldan").onchange=function(event){
		var ss=document.getElementById("seldan").value;
		gugu(ss);
}

document.getElementById("del").onclick=function(event){
		delGugu();
}