[Javascript] 테이블 행 개수 구하기

 

테이블 행 개수 구하기

<table id='myTable' border='1'>
  <thead>
    <tr><th>Header</th></tr>
  </thead>
  <tbody>
    <tr><td>Row 1</td></tr>
    <tr><td>Row 2</td></tr>
    <tr><td>Row 3</td></tr>
  </tbody>
  <tfoot>
      <tr><td>Footer</td></tr>
  </tfoot>
</table>
<div id='result'></div>

const table = document.getElementById('myTable');
const totalRowCnt = table.rows.length;
result.innerText = '전체 행 개수: ' + totalRowCnt + '\n';

const tbody = table.tBodies[0].rows.length;
result.innerText += 'Tbody 행 개수 : ' + tbody;

 

 전체 행 개수 

table.rows.length;

HTMLTableElement는 rows라는 속성을 가지고,

이 속성은 모든 <tr> element를  포함하는 HTMLCollection 객체를 리턴합니다.

(<thead>, <tbody>, <tfoot> 안의 모든 <tr>을 포함합니다.)

그리고, HTMLCollection의 length라는 속성을 통해 item의 갯수를 구할 수 있습니다.

 

 tbody의 행 개수 

table.tBodies[0].rows.length;

<tbody> 부분의 행 갯수를 구하는 방법입니다.

HTMLTableElement.tBodies 속성은

element의 모든 <tbody> element를 포함하는 HTMLCollection 객체를 리턴합니다.

우리의 예제에는 <tbody>가 1개밖에 없으므로,

table.tBodies[0]으로 <tbody> element에 접근한 후,

전체 행 개수를 구하는 것과 마찬가지로,

rows 속성과 length 속성을 이용하여 행의 개수를 계산하였습니다.