[javascript] TableSorter를 이용한 테이블의 셀에 링크 추가하기

18 Dec 2023

javascript

때때로 테이블에서 정렬된 셀에 링크를 추가해야 하는 경우가 있습니다. 이를 위해 TableSorter 플러그인을 사용하면 편리하게 셀에 링크를 추가할 수 있습니다. 이 글에서는 TableSorter를 사용하여 테이블의 셀에 링크를 추가하는 방법을 설명하겠습니다.

TableSorter 소개

TableSorter는 jQuery 플러그인으로, 테이블을 정렬하고 필터링하는 기능을 제공합니다. 이 플러그인을 사용하면 HTML 테이블의 각 열을 정렬할 수 있을 뿐 아니라, 사용자 정의 데이터를 삽입하고 확장할 수 있습니다.

TableSorter를 통해 테이블의 각 셀에 링크를 추가하여 사용자가 정렬된 데이터를 클릭했을 때 해당 링크로 이동할 수 있습니다.

TableSorter를 이용한 링크 추가 방법

TableSorter를 이용하여 테이블의 셀에 링크를 추가하는 단계는 다음과 같습니다.

먼저, HTML 테이블과 TableSorter 플러그인을 포함하는 JavaScript 파일을 준비합니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <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.34.8/js/jquery.tablesorter.min.js"></script>
</head>
<body>
  <table id="myTable" class="tablesorter">
    <thead>
      <tr>
        <th>이름</th>
        <th>나이</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><a href="#">John</a></td>
        <td>25</td>
      </tr>
      <tr>
        <td><a href="#">Alice</a></td>
        <td>30</td>
      </tr>
    </tbody>
  </table>
  <script>
    $(document).ready(function() {
      $("#myTable").tablesorter();
    });
  </script>
</body>
</html>

테이블에 링크를 추가하고 TableSorter를 초기화합니다. 이를 통해 사용자가 이름을 클릭할 때 해당 링크로 이동할 수 있게 됩니다.

이제, TableSorter를 사용하여 테이블의 셀에 링크를 추가하는 방법에 대해 간단히 알아보았습니다. TableSorter를 사용하면 테이블의 데이터를 보다 효과적으로 정렬하고 필터링할 수 있을 뿐 아니라, 유용한 기능들을 원하는 대로 확장할 수 있습니다.

더 자세한 내용은 TableSorter 공식 문서를 참고하시기 바랍니다.