Daily coding

Java Script : 예제7 - 테이블 및 배열로 계산하기 본문

Front-end/Java Script

Java Script : 예제7 - 테이블 및 배열로 계산하기

sunnnkim 2020. 1. 9. 19:59 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
th{
background-color: #A9D0F5; 
}
td{
text-align: center;
}
</style>
</head>
<body>

<h1>배열의 연산</h1>
<table border="1" style="width: 30%" id="tb">
<col style="width: 50">
<col style="width: 80">
<col style="width: 80">
<col style="width: 100">
<tr>
	<th>첨자</th>
	<th>a</th>
	<th>b</th>
	<th>a x b 를 계산</th>
</tr>
<tr>
	<th>0</th>
	<td>5</td>
	<td>33</td>
	<td><input type="button" onclick="func(1)" value="계산결과"></td>
</tr>
<tr>
	<th>1</th>
	<td>12</td>
	<td>14</td>
	<td><input type="button" onclick="func(2)" value="계산결과"></td>	
</tr>
<tr>
	<th>2</th>
	<td>18</td>
	<td>65</td>	
	<td><input type="button" onclick="func(3)" value="계산결과"></td>	
</tr>

</table>


<script type="text/javascript">
// rows[]와 cells[]로 셀에 접근하기
function func( num ) {
	var n1 = document.getElementById("tb").rows[num].cells[1].innerHTML;
	var n2 = document.getElementById("tb").rows[num].cells[2].innerHTML;
	var result = n1 * n2;
	alert(result);
}





</script>

</body>
</html>

'Front-end > Java Script' 카테고리의 다른 글

Java Script : 예제9 - 포털사이트 링크 연결하기  (0) 2020.01.09
Java Script : 예제8 - element 생성해서 테이블 만들기  (0) 2020.01.09
Java Script : 예제6 - 마우스이벤트(onmouseover)  (0) 2020.01.09
Java Script : 예제5 - 현재 시간 출력하기  (0) 2020.01.09
Java Script : 예제4 - 랜덤하게 주사위 돌리기  (0) 2020.01.09
'Front-end/Java Script' Related Articles more