TableSorter는 자바스크립트를 사용하여 HTML 테이블의 정렬, 필터링, 페이징 등을 추가할 수 있는 강력한 도구입니다. 이 중에서 테이블의 각 셀에 툴팁을 추가하는 방법에 대해 알아보겠습니다.

TableSorter 라이브러리 추가하기

먼저 TableSorter 라이브러리를 HTML 페이지에 추가합니다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.34.2/js/jquery.tablesorter.min.js"></script>

테이블에 툴팁 추가하기

각 셀에 툴팁을 추가하려면 테이블이 초기화될 때 툴팁을 설정해야 합니다. 이를 위해 TableSorter의 initialized 콜백 함수를 사용할 수 있습니다.

$(document).ready(function() {
    $("#myTable").tablesorter({
        initialized: function(table) {
            $(table).find('td').each(function() {
                var cellData = $(this).text();
                $(this).attr('title', cellData);
            });
        }
    });
});

위 예제에서는 initialized 콜백 함수를 사용하여 myTable ID를 가진 테이블의 각 셀에 해당 셀의 내용을 툴팁으로 설정하고 있습니다.

이제 위의 코드를 사용하여 TableSorter를 통해 테이블의 각 셀에 툴팁을 추가할 수 있습니다.

마치며

이제 테이블의 각 셀에 자동으로 툴팁을 추가하는 방법을 알아보았습니다. TableSorter를 이용하여 테이블을 보다 사용자 친화적으로 만들 수 있습니다.

참고 자료: TableSorter 공식 문서