웹 개발을 하다 보면 테이블에 담긴 데이터를 사용자가 원하는 기준으로 정렬해야 하는 경우가 자주 있습니다. JavaScript를 활용하면 서버 요청 없이 브라우저에서 바로 테이블 행을 재배치할 수 있습니다. 이 글에서는 버튼 클릭 한 번으로 HTML 테이블을 이름순(알파벳순)으로 정렬하는 방법을 예제 코드와 함께 살펴보겠습니다.
JavaScript 테이블 정렬 예제 코드
아래 예제는 이름과 생일 월이 담긴 테이블을 대상으로, Sort 버튼을 누르면 첫 번째 열(이름)을 기준으로 오름차순 정렬됩니다.
<!DOCTYPE html>
<html>
<head>
<title>Sort a HTML Table Alphabetically</title>
<style>
button {
padding: 10px;
margin-bottom: 5px;
font-size: 16px;
font-weight: bold;
}
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
table {
border-spacing: 0;
width: 100%;
border: 1px solid #ddd;
}
th, td {
border-top: 1px solid black;
text-align: left;
padding: 16px;
}
</style>
</head>
<body>
<h1>Sorting table example</h1>
<button onclick="sortTable()">Sort</button>
<table class="filterTable">
<tr>
<th>Name</th>
<th>BirthDay Month</th>
</tr>
<tr>
<td>Ron</td>
<td>January</td>
</tr>
<tr>
<td>Shawn</td>
<td>April</td>
</tr>
<tr>
<td>Caleb</td>
<td>December</td>
</tr>
<tr>
<td>Bruno</td>
<td>February</td>
</tr>
<tr>
<td>Jack</td>
<td>October</td>
</tr>
<tr>
<td>Max</td>
<td>November</td>
</tr>
</table>
<script>
function sortTable() {
var filterTable, rows, sorted, i, x, y, sortFlag;
filterTable = document.querySelector(".filterTable");
sorted = true;
while (sorted) {
sorted = false;
rows = filterTable.rows;
for (i = 1; i < rows.length - 1; i++) {
sortFlag = false;
x = rows[i].getElementsByTagName("TD")[0];
y = rows[i + 1].getElementsByTagName("TD")[0];
if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
sortFlag = true;
break;
}
}
if (sortFlag) {
rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
sorted = true;
}
}
}
</script>
</body>
</html>
실행 결과
위 코드를 브라우저에서 실행하면 다음과 같은 초기 화면이 나타납니다.
여기서 Sort 버튼을 클릭하면 −
테이블의 모든 행이 첫 번째 열(이름)을 기준으로 Bruno → Caleb → Jack → Max → Ron → Shawn 순서, 즉 알파벳 오름차순으로 재배치된 것을 확인할 수 있습니다.
코드 작동 원리
정렬 로직은 버블 정렬(Bubble Sort) 방식으로 동작합니다. 핵심 흐름은 다음과 같습니다.
document.querySelector(".filterTable")로 정렬 대상 테이블을 선택합니다.while반복문 안에서 인접한 두 행(rows[i],rows[i + 1])의 첫 번째 셀 값을 비교합니다.toLowerCase()를 사용해 대소문자 차이 없이 비교하므로, 'Ron'과 'ron'처럼 표기가 달라도 올바르게 정렬됩니다.- 앞 행이 더 크면
insertBefore()로 두 행의 위치를 교환하고, 교환이 발생했음을 표시해 반복을 계속합니다. - 더 이상 교환이 일어나지 않으면 정렬이 완료된 것으로 판단하고 반복문을 종료합니다.
루프는 헤더 행을 건너뛰기 위해 인덱스 1부터 시작하며, 이렇게 하면 제목 행은 그대로 유지되고 데이터 행만 정렬됩니다.
마무리 및 확장 아이디어
이 방식은 별도의 외부 라이브러리 없이 순수 JavaScript만으로 테이블 정렬을 구현할 수 있다는 점에서 유용합니다. 실무에서는 여기에 다음과 같은 기능을 추가해 확장할 수 있습니다.
- 열 머리글(th) 클릭 시 해당 열을 기준으로 정렬하도록 이벤트 연결
- 오름차순/내림차순 토글 기능 추가
- 숫자나 날짜 형식 데이터에 맞는 비교 함수 적용
데이터 양이 많다면 성능을 고려해 Array.prototype.sort()를 활용한 방식으로 최적화하는 것도 좋은 선택입니다.