[javascript] TableSorter를 이용한 테이블의 셀에 탭 메뉴 추가하기

18 Dec 2023

javascript

TableSorter는 테이블에서 정렬, 필터링 및 페이지네이션을 제공하는 JavaScript 플러그인입니다. 테이블의 셀에 탭 메뉴를 추가하여 사용자가 컨텐츠를 손쉽게 탐색할 수 있도록 만들어보겠습니다.

TableSorter 및 필수 라이브러리 추가하기

우선 TableSorter 및 관련 라이브러리를 HTML 페이지에 추가해야 합니다.

<!DOCTYPE html>
<html>
<head>
    <title>Table with Tab Menu</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.33.1/js/jquery.tablesorter.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.33.1/css/theme.default.min.css">
</head>
<body>
    <table id="myTable" class="tablesorter">
        <!-- 테이블 내용 추가 -->
    </table>
    <script>
        $(document).ready(function(){
            $("#myTable").tablesorter();
        });
    </script>
</body>
</html>

각 셀에 탭 메뉴 추가하기

이제 각 셀에 탭 메뉴를 추가할 차례입니다. jQuery를 이용하여 테이블을 돌면서 각 셀에 탭 메뉴를 추가할 수 있습니다.

$(document).ready(function(){
    $('#myTable tbody tr td').each(function(){
        var cellContent = $(this).html();
        $(this).html('<div class="tab-menu"><ul><li>' + cellContent.split(',').join('</li><li>') + '</li></ul></div>');
    });
});

위 코드는 테이블의 각 셀을 돌면서 그 내용을 쉼표로 나누고 각각을 <li> 태그로 감싸 탭 메뉴처럼 보이도록 만듭니다.

탭 메뉴 스타일링

코드에는 CSS 스타일이 포함되어 있지 않지만, 탭 메뉴의 스타일링을 원하는 대로 수정하여 추가할 수 있습니다.

이제 당신은 TableSorter를 사용해 테이블의 각 셀에 탭 메뉴를 추가할 수 있습니다. 추가적으로 탭 메뉴에 이벤트를 추가하여 사용자 경험을 향상시킬 수도 있습니다.

참고 문헌: