웹 개발을 하다 보면 HTML 테이블에 데이터가 몇 행(row) 있는지 확인해야 하는 경우가 자주 발생합니다. 예를 들어 다음과 같은 테이블이 있다고 가정해 보겠습니다.
<table id="tblDemo" border="1"> <thead> <tr> <th>Name</th> <th>Age</th> </tr> </thead> <tbody> <tr><td>John</td><td>21</td></tr> <tr><td>David</td><td>22</td></tr> <tr><td>Bob</td><td>20</td></tr> <tr><td>Mike</td><td>24</td></tr> </tbody> </table>
.rows.length로 행 개수 구하기
HTML 테이블의 전체 행 개수를 구하는 가장 간단한 방법은 .rows.length 속성을 사용하는 것입니다. 이 속성은 테이블 내부에 포함된 모든 <tr> 요소의 개수를 숫자로 반환합니다. 아래는 전체 예제 코드입니다.
예제 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initialscale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<table id="tblDemo" border="1">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr><td>John</td><td>21</td></tr>
<tr><td>David</td><td>22</td></tr>
<tr><td>Bob</td><td>20</td></tr>
<tr><td>Mike</td><td>24</td></tr>
</tbody>
</table>
<script>
var allTableData = document.getElementById("tblDemo");
var totalNumbeOfRows = allTableData.rows.length;
console.log("Total Number Of Rows="+totalNumbeOfRows);
</script>
</body>
</html>프로그램 실행 방법
위 프로그램을 실행하려면 파일 이름을 “anyName.html”(index.html)로 저장한 뒤, VS Code 편집기에서 해당 파일을 마우스 오른쪽 버튼으로 클릭하고 “Open with Live Server” 옵션을 선택하면 됩니다.
실행 결과
위 코드를 실행하면 브라우저 콘솔(Console)에 다음과 같은 결과가 출력됩니다.
Total Number Of Rows=5
여기서 주의할 점은 .rows.length가 <thead>의 헤더 행까지 함께 계산한다는 것입니다. 위 예제에서는 헤더 1행과 본문 4행을 합쳐 총 5가 출력됩니다. 만약 실제 데이터 행(<tbody> 내부의 행)만 세고 싶다면 다음과 같이 querySelectorAll()을 활용할 수 있습니다.
var bodyRowCount = document.querySelectorAll("#tblDemo tbody tr").length;
console.log("데이터 행 개수=" + bodyRowCount); // 4 출력이처럼 상황에 맞는 방법을 선택하면 테이블의 행 개수를 정확하게 가져올 수 있습니다.