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

18 Dec 2023

javascript

웹 개발에서 데이터를 테이블로 표시할 때, 사용자가 테이블의 행에 체크박스를 추가하여 특정 항목을 선택할 수 있는 기능이 종종 필요합니다. 이번 블로그에서는 JavaScript 라이브러리 중 하나인 TableSorter를 사용하여 테이블의 각 셀에 체크박스를 추가하는 방법을 알아보겠습니다.

TableSorter 소개

TableSorter는 테이블의 정렬, 필터링, 페이징 등의 기능을 제공하는 JavaScript 플러그인입니다. 이를 이용하면 테이블을 보기 좋게 정렬하고, 사용자가 원하는 항목을 쉽게 찾을 수 있도록 도와줍니다. 또한 이 플러그인을 사용하면 다른 기능들과 함께 테이블에 체크박스를 추가할 수 있습니다.

테이블의 셀에 체크박스 추가하기

TableSorter를 사용하여 테이블의 셀에 체크박스를 추가하려면 다음과 같은 단계를 따릅니다.

TableSorter 라이브러리를 추가 - 먼저 TableSorter 라이브러리를 프로젝트에 추가합니다. 이를 위해서는 CDN 링크를 통해 라이브러리를 불러올 수 있습니다.

예시:
```
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.33.3/js/jquery.tablesorter.min.js"></script>
```
체크박스를 테이블 셀에 추가 - 테이블을 초기화할 때, TableSorter에 테이블이 로드된 후 각 행의 셀에 체크박스를 추가합니다. 이를 위해 TableSorter의 initialized 이벤트를 사용할 수 있습니다.

예시:
```
$(function() {
  $("#myTable").tablesorter().bind("initialized", function() {
    $("tbody tr").each(function() {
      $(this).prepend("<td><input type='checkbox'></td>");
    });
  });
});
```

위의 예시 코드에서 #myTable은 테이블의 ID를 나타냅니다. 테이블을 초기화한 후 initialized 이벤트가 발생하면 각 행의 시작 부분에 체크박스를 추가합니다.

마치며

이렇게하면 TableSorter와 JavaScript를 사용하여 테이블의 각 셀에 체크박스를 추가할 수 있습니다. 사용자는 테이블을 쉽게 필터링하고 특정 항목을 선택하여 작업을 수행할 수 있게 됩니다.

더 많은 TableSorter의 기능 및 사용법은 TableSorter 공식 문서에서 찾아볼 수 있습니다.