TableSorter는 HTML 테이블을 정렬하고 필터링하는 JavaScript 라이브러리입니다. 이 라이브러리를 사용하면 테이블 시각화를 쉽게 구현할 수 있습니다.

이번에는 TableSorter를 사용하여 테이블의 셀에 마우스 오버 및 아웃 이벤트를 추가하는 방법에 대해 알아보겠습니다.

TableSorter 적용

우선, HTML 테이블에 TableSorter를 적용해야 합니다. 아래는 간단한 HTML 테이블에 TableSorter를 적용하는 예제 코드입니다.

<table id="myTable" class="tablesorter">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Country</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>25</td>
      <td>USA</td>
    </tr>
    <tr>
      <td>Alice</td>
      <td>30</td>
      <td>Canada</td>
    </tr>
  </tbody>
</table>
<script src="jquery.min.js"></script>
<script src="jquery.tablesorter.min.js"></script>
<script>
  $(document).ready(function(){
    $("#myTable").tablesorter();
  });
</script>

마우스 오버/아웃 이벤트 추가

이제 해당 테이블의 셀에 마우스 오버 및 아웃 이벤트를 추가하겠습니다. jQuery를 사용하여 각 셀에 이벤트를 추가할 수 있습니다.

$(document).ready(function(){
  $("#myTable tr td").hover(
    function(){
      $(this).css("background-color", "lightgray");
    },
    function(){
      $(this).css("background-color", "");
    }
  );
});

위 코드에서는 hover 함수를 사용하여 각 셀에 마우스가 올라갔을 때와 나갔을 때의 처리를 정의하였습니다.

이제 테이블의 셀에 마우스를 올려보면 배경색이 바뀌는 것을 확인할 수 있습니다.

TableSorter와 마우스 이벤트를 결합하여 테이블을 더욱 동적으로 만들 수 있습니다.

더 많은 TableSorter 옵션 및 사용 예제는 TableSorter 공식 문서를 참고하세요.

이렇게 TableSorter와 마우스 이벤트를 이용하여 테이블을 더 다채롭게 만들 수 있습니다.