[javascript] TableSorter를 이용한 테이블에서 커서 포인터로 마우스가 올라온 셀 하이라이트 효과 주기

18 Dec 2023

javascript

일반적으로 테이블에 마우스를 가져다 대면 시각적인 피드백을 제공하여 사용자 경험을 향상시킬 수 있습니다. 이 예시에서는 JavaScript 라이브러리인 TableSorter를 사용하여 테이블의 셀에 마우스가 올라올 때 하이라이트 효과를 주는 방법을 알아보겠습니다.

1. TableSorter 및 관련 라이브러리 불러오기

먼저 TableSorter 및 jQuery 라이브러리를 HTML 문서에 불러옵니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>TableSorter 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.33.3/js/jquery.tablesorter.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.33.3/css/theme.default.min.css">
</head>
<body>

2. 테이블에 TableSorter 적용

테이블에 TableSorter 플러그인을 적용합니다.

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

3. 마우스 호버 시 하이라이트 효과 적용

마우스가 올라간 셀에 hover 이벤트를 사용하여 하이라이트 효과를 적용할 수 있습니다.

$(document).ready(function(){
  $('table').on('mouseenter', 'td', function() {
    $(this).parent().find('td').addClass('highlight');
  });
  $('table').on('mouseleave', 'td', function() {
    $(this).parent().find('td').removeClass('highlight');
  });
});

마무리

이 예시를 통해 TableSorter와 jQuery를 사용하여 테이블의 셀에 마우스 호버 시 하이라이트 효과를 쉽게 적용할 수 있다는 것을 알 수 있습니다. 사용자들은 이를 통해 테이블을 보다 쉽게 읽고 상호작용할 수 있게 됩니다.

더 많은 TableSorter 도움말 및 정보는 TableSorter 공식 웹사이트에서 찾아볼 수 있습니다.