웹 페이지에서 테이블을 표시할 때, TableSorter는 테이블을 정렬하고 필터링하는 기능을 제공하는 훌륭한 플러그인입니다. 특히 테이블의 열을 사용자가 클릭할 때마다 동적으로 클래스를 추가하여 사용자에게 열이 현재 정렬된 상태를 시각적으로 보여주는 것이 유용할 수 있습니다.

TableSorter 플러그인 설치

우선, HTML 파일에 TableSorter 라이브러리를 불러와야 합니다.

<script src="jquery.tablesorter.min.js"></script>

그리고 나서 테이블에 TableSorter를 적용합니다.

$(document).ready(function(){
  $("#myTable").tablesorter();
});

열 클릭 시 클래스 추가하기

이제 테이블의 각 열을 클릭할 때마다 해당 열에 클래스를 추가하는 스크립트를 추가해봅시다.

$(document).ready(function(){
  $("#myTable th").click(function(){
    $(this).toggleClass("sorted");
    $(this).siblings().removeClass("sorted");
  });
});

#myTable은 TableSorter가 적용된 테이블의 ID를 나타냅니다. 위의 코드에서는 각 열 머리글(TH 요소)을 클릭할 때 sorted 클래스를 추가하거나 제거하는 기능을 구현했습니다.

마무리

이렇게 하면 사용자가 어떤 열을 현재 정렬 중인지 쉽게 판단할 수 있습니다. TableSorter와 함께 동적 클래스 추가를 통해 사용자 경험을 향상시킬 수 있습니다.

참고 자료:

• TableSorter 공식 문서
• jQuery 공식 사이트