[javascript] TableSorter를 이용한 테이블의 셀에 드롭다운 메뉴 추가하기

18 Dec 2023

javascript

프론트엔드 개발에서 테이블을 사용하여 데이터를 표시하는 것은 매우 일반적입니다. 데이터를 정렬하고 필터링하기 위해 TableSorter 라이브러리를 사용하는 것은 흔한 일입니다. 여기에 테이블의 셀에 드롭다운 메뉴를 추가하는 방법을 살펴보겠습니다.

TableSorter 및 jQuery 추가

우선, 이 예제에서는 TableSorter와 jQuery 라이브러리를 사용합니다. 해당 라이브러리들을 HTML 문서에 추가하는 방법은 아래와 같습니다.

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- TableSorter -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/3.0.5/js/jquery.tablesorter.min.js"></script>

드롭다운 메뉴 추가

테이블의 셀에 드롭다운 메뉴를 추가하기 위해선, 해당 셀의 내용을 드롭다운 형식으로 변경하는 JavaScript 코드를 작성해야 합니다. 예를 들어, 다음과 같이 jQuery를 사용하여 셀의 내용을 드롭다운 메뉴로 변경할 수 있습니다.

<script>
  $(document).ready(function(){
    $('table').tablesorter();
    // 테이블의 특정 셀에 드롭다운 메뉴 추가
    $('.dropdown-cell').each(function(){
      var cellContent = $(this).text();
      var dropdownMenu = '<select><option value="option1">Option 1</option><option value="option2">Option 2</option><option value="option3">Option 3</option></select>';
      $(this).html(dropdownMenu);
    });
  });
</script>

위 코드에서는 dropdown-cell 클래스를 가진 각 셀의 내용을 드롭다운 메뉴로 변경하고 있습니다.

결론

TableSorter 라이브러리를 사용하여 테이블의 셀에 드롭다운 메뉴를 추가하는 것은 매우 간단합니다. 위의 예제를 참고하여 데이터를 표시하고 필터링하는 과정에서 사용자 경험을 향상시킬 수 있습니다.