[Javascript] 테이블 합계 계산하기

 

테이블의 특정 열의 값들의 합계를 계산하는 방법입니다.

 

테이블 합계 계산하기

<table id='fruits' border="1">
  <tr><td>사과</td><td>100</td></tr>
  <tr><td>오렌지<td>200</td></tr>
  <tr><td>바나나</td><td>300</td></tr>
</table>
<input type='button' 
       value='합계 계산' 
       onclick='calcSum()' />
<div id='sum'></div>

function calcSum() {
  // table element 찾기
  const table = document.getElementById('fruits');
  
  // 합계 계산
  let sum = 0;
  for(let i = 0; i < table.rows.length; i++)  {
    sum += parseInt(table.rows[i].cells[1].innerHTML);
  }
  
  // 합계 출력
  document.getElementById('sum').innerText = sum;
  
}

위 예제는 '합계 계산' 버튼을 클릭하면, 테이블의 2번째 column의 값들을 모두 더해서 출력해 줍니다.

각 row의 값들을 가져오기 위해서 HTMLTableElement 객체의 rows 프로퍼티를 사용하였고,

특정 cell의 값을 가져오기 위해서 HTMLTableRowElement 객체의 cells 프로퍼티를 사용하였습니다.

 

---

 

이 외에 HTML, Javascript에서 table에 관련 된 내용은 아래의 포스팅을 참조하세요.

[HTML] 기본 테이블(표, Table) 그리기 (table, tr, td, th)

[HTML] 테이블 제목 지정하기, caption tag

[HTML] 테이블(table) 가로, 세로 셀 병합하기 (colspan, rowspan)

[Javascript] 테이블에 행 추가, 삭제하기 (버튼 클릭)

 

---

테이블의 특정 열의 합계를 계산하는 방법을 알아보았습니다.