choice blog

배열의 연산

 

예제

<h3>배열의 연산</h3>
<table>
<col width="50"><col width="80"><col width="80"><col width="100">
<thead>
	<tr>
		<th>첨자</th><th>a</th><th>b</th><th>a x b</th>
	</tr>
</thead>
<tbody>
	<tr>
		<th>0</th><td>5</td><td>33</td>
		<td>
			<button type="button" onclick="multi(0)">계산결과</button>
	</tr>
	<tr>
		<th>1</th><td>12</td><td>14</td>
		<td>
			<button type="button" onclick="multi(1)">계산결과</button>
	</tr>
	<tr>
		<th>2</th><td>18</td><td>65</td>
		<td>
			<button type="button" onclick="multi(2)">계산결과</button>
	</tr>
</tbody>
</table>
<script type="text/javascript">

let nodeNum = document.getElementsByTagName("td");

let a = new Array(3); // index 0, 3, 6이 필요
let b = new Array(3); // index 1, 4, 7이 필요

for(i=0; a.length; i++){
	a[i] = nodeNum[0 + (3*i)].innerHTML;
	b[i] = nodeNum[1 + (3*i)].innerHTML;
}
function multi(index) {
	let result = a[index] * b[index];
	alert("계산결과는"+result+"입니다");
}
</script>

 

설명

 버튼 클릭시 계산결과가 나온다.

 table의 값과 관계없이 index번호로 접근하여 계산하는 예제이다.

 

let nodeNum = document.getElementsByTagName("td");

getElementsByTagName("태그명") : 해당 태그들의 인덱스 번호를 가져온다. 

위 코드의 td태그는 9개, nodeNum의 값은 8이 된다. (index 0부터 시작)

연산할 index값을 for문을 통해 배열에 넣어준다.