[javascript] TableSorter를 이용한 테이블의 셀에 애니메이션 효과 적용하기

18 Dec 2023

javascript

웹 애플리케이션에서 테이블을 사용하는 것은 일반적입니다. 테이블을 더 사용하기 쉽고 효과적으로 만들기 위해 TableSorter 플러그인을 사용하고자 하는 경우가 많습니다. 이 플러그인을 사용하여 테이블의 셀에 애니메이션 효과를 추가하는 방법을 소개하겠습니다.

TableSorter 라이브러리 추가

우선, TableSorter 라이브러리를 웹 페이지에 추가해야 합니다. 이를 위해 CDN을 사용하거나 라이브러리 파일을 직접 다운로드하여 웹 페이지에 포함시킬 수 있습니다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.34.2/js/jquery.tablesorter.min.js"></script>

CSS 스타일링

다음으로, 셀에 적용할 애니메이션 효과 및 스타일링을 위한 CSS를 추가합니다. 아래는 예시입니다.

td {
  transition: background-color 0.3s;
}

셀 애니메이션 적용

테이블이 로드된 후 TableSorter 플러그인을 이용하여 테이블을 초기화하고, 테이블의 셀에 마우스를 올리거나 클릭할 때 애니메이션 효과를 적용할 수 있습니다. 아래는 JavaScript 코드 예시입니다.

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

  $("td").hover(
    function(){
      $(this).css("background-color", "#f7f7f7");
    },
    function(){
      $(this).css("background-color", "");
    }
  );
});

위 코드에서, #myTable은 테이블의 ID에 해당하는 값으로 대체되어야 합니다.

이제 테이블의 셀에 마우스를 올리면 배경색이 변경되는 애니메이션 효과가 적용될 것입니다.

위의 과정을 따라하면, TableSorter를 이용하여 테이블의 셀에 애니메이션 효과를 쉽게 추가할 수 있습니다.

TableSorter 라이브러리 추가

CSS 스타일링

셀 애니메이션 적용

참고 자료