웹 애플리케이션에서 테이블을 사용할 때 종종 테이블의 여러 행을 선택하여 삭제해야 하는 상황이 발생합니다. 이러한 경우에 TableSorter 플러그인을 사용하면 테이블을 정렬하고 필터링하는 기능 외에도 체크박스를 사용하여 테이블의 여러 행을 쉽게 선택하고 삭제할 수 있습니다.

TableSorter 플러그인 설치

TableSorter 플러그인은 기존의 HTML 테이블을 업그레이드하여 정렬, 필터링, 페이지네이션 등의 기능을 제공합니다. 다음은 TableSorter를 설치하는 방법입니다.

1. TableSorter 공식 웹사이트에서 최신 버전의 TableSorter를 다운로드합니다.
2. 다운로드한 파일을 압축 해제하고 원하는 디렉토리에 플러그인 파일들을 복사합니다.
3. HTML 파일에서 JQuery 및 TableSorter의 스크립트 파일을 로드합니다.

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="path/to/jquery.tablesorter.min.js"></script>

테이블에서 체크박스로 행 선택하기

다음은 테이블의 각 행에 체크박스를 추가하여 사용자가 원하는 행을 선택할 수 있도록 하는 예제입니다.

<table id="myTable" class="tablesorter">
  <thead>
    <tr>
      <th><input type="checkbox" id="selectAll"></th>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="checkbox" class="rowSelect"></td>
      <td>Data 1-1</td>
      <td>Data 1-2</td>
      <td>Data 1-3</td>
    </tr>
    <tr>
      <td><input type="checkbox" class="rowSelect"></td>
      <td>Data 2-1</td>
      <td>Data 2-2</td>
      <td>Data 2-3</td>
    </tr>
    <!-- More rows -->
  </tbody>
</table>

선택된 행 삭제하기

이제 테이블에서 체크박스로 선택된 행을 삭제하는 JavaScript 코드를 작성해보겠습니다.

$(document).ready(function() {
  $('#selectAll').change(function() {
    if ($(this).is(':checked')) {
      $('.rowSelect').prop('checked', true);
    } else {
      $('.rowSelect').prop('checked', false);
    }
  });

  $('#deleteButton').click(function() {
    $('.rowSelect:checked').closest('tr').remove();
  });
});

위의 코드는 “전체 선택” 체크박스를 클릭할 때 모든 체크박스가 선택되거나 선택이 해제되도록 하는 기능과 “삭제” 버튼을 클릭할 때 선택된 행을 삭제하는 기능을 구현한 것입니다.

결론

TableSorter 플러그인을 사용하여 테이블을 업그레이드하고 체크박스를 사용하여 원하는 행을 쉽게 선택하고 삭제할 수 있습니다. 이를 통해 사용자 친화적인 화면을 제공하고 효율적으로 데이터를 관리할 수 있습니다.

참고 문헌:

• https://mottie.github.io/tablesorter/docs/
• https://api.jquery.com/addClass/