728x90
jq04.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style type="text/css">
#my_div{
height : 200px;
width : 300px;
}
</style>
<script>
$(function(){
$('#btn').bind('click',function(){
myclick();
});
});
function myclick(){
var num = $('#my_select');
var num2 =num.val();
var num3 =parseInt(num2);
str ="";
for(i=1; i<=9; i++){
str += num3 + "*" + i + "=" + (num3*i) + '<br/>';
}
$('#my_div').html(str);
}
</script>
</head>
<body>
EX04
<table border="1px">
<tr>
<td>출력단수</td>
<td>
<select id="my_select">
<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>
</td>
</tr>
<tr>
<td colspan="2">
<input type="button" value="출력하기" id="btn">
</td>
</tr>
<tr>
<td colspan="2">
<div id="my_div"></div>
</td>
</tr>
</table>
</body>
</html>
단수 선택하고 출력하기 클릭시
결과
'Python > Muzi' 카테고리의 다른 글
| Jquery강화학습06. 별찍기 (0) | 2023.07.13 |
|---|---|
| Jquery강화학습05. 전화기 만들기 (0) | 2023.07.12 |
| Jquery강화학습03. 로또번호 생성하기 (0) | 2023.07.12 |
| Jquery강화학습01. div값 글씨 바꾸기 (0) | 2023.07.12 |
| Jquery강화학습02. text값 가져와서 연산하기 (0) | 2023.07.12 |
