[javascript] TableSorter를 이용한 테이블의 특정 셀을 체크박스로 선택하기
TableSorter는 HTML 테이블을 정렬하고 필터링할 수 있는 자바스크립트 라이브러리입니다. 사용자는 TableSorter를 사용하여 테이블의 특정 셀을 체크박스로 선택할 수 있습니다. 이 기능을 구현하는 방법을 살펴보겠습니다.
1. TableSorter 라이브러리 추가
먼저, TableSorter 라이브러리를 HTML 페이지에 추가해야 합니다. 다음은 CDN을 통해 TableSorter를 추가하는 예시입니다:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.0.5/js/jquery.tablesorter.min.js"></script>
2. 테이블에 체크박스 열 추가
테이블에 체크박스를 표시할 열을 추가해야 합니다.
<table id="myTable">
<thead>
<tr>
<th></th> <!-- 체크박스 열 -->
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"></td> <!-- 체크박스를 표시할 열 -->
<td>John</td>
<td>25</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>Jane</td>
<td>30</td>
</tr>
</tbody>
</table>
3. TableSorter 초기화 및 설정
TableSorter를 초기화하고 테이블을 설정해야 합니다. 다음은 TableSorter를 초기화하고 체크박스를 테이블의 첫 번째 열에 삽입하는 예시입니다:
$(document).ready(function(){
$('#myTable').tablesorter();
// 체크박스를 테이블의 첫 번째 열에 삽입
$('#myTable tbody tr').find('td:eq(0)').each(function(){
$(this).html('<input type="checkbox">');
});
});
4. 선택된 행 처리
체크박스를 클릭할 때 선택된 행을 처리하는 코드를 추가할 수 있습니다. 예를 들어, 선택된 행의 배경색을 변경하는 등의 동작을 추가할 수 있습니다.
// 체크박스 클릭 시 선택된 행 처리
$('#myTable input[type="checkbox"]').on('change', function(){
if($(this).is(':checked')){
$(this).closest('tr').addClass('selected');
} else {
$(this).closest('tr').removeClass('selected');
}
});
이제 위의 코드들을 통해 TableSorter를 사용하여 테이블의 특정 셀을 체크박스로 선택할 수 있습니다!