[javascript] TableSorter를 이용한 테이블의 데이터를 Clipboard에 복사하기

18 Dec 2023

javascript

TableSorter는 자바스크립트를 사용하여 HTML 테이블에서 정렬, 필터링 및 페이징을 쉽게 구현할 수 있는 라이브러리입니다. 사용자가 테이블의 데이터를 클립보드에 복사하고 싶을 때 “TableSorter” 라이브러리를 이용하면 편리하게 이 구현할 수 있습니다.

TableSorter 라이브러리 설치

TableSorter를 사용하기 위해 아래와 같이 CDN 링크를 이용하여 라이브러리를 추가합니다.

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

클릭보드에 데이터 복사하기

클립보드에 데이터를 복사하는 기능은 Clipboard API를 사용하여 구현할 수 있습니다.

다음은 TableSorter를 이용하여 테이블을 생성하고 클립보드에 데이터를 복사하는 예제입니다.

$(document).ready(function(){
  $("#myTable").tablesorter();

  // 클릭 이벤트를 이용하여 데이터를 클립보드에 복사
  $("#copyButton").on("click", function(){
    var tableData = "";
    $("#myTable tbody tr").each(function(){
      $(this).find("td").each(function(){
        tableData += $(this).text() + "\t";  // 탭으로 열을 분리
      });
      tableData += "\n";  // 행마다 줄 바꿈
    });

    navigator.clipboard.writeText(tableData)
      .then(() => {
        alert('테이블 데이터가 클립보드에 복사되었습니다.');
      })
      .catch(err => {
        console.error('클립보드 복사 실패:', err);
      });
  });
});

위의 예제에서 #myTable은 테이블의 아이디, #copyButton은 클릭 이벤트를 처리할 버튼의 아이디입니다.

이제 테이블 데이터를 클립보드에 복사하는 기능을 TableSorter와 함께 사용할 수 있게 되었습니다.

위 예제를 통해 TableSorter를 이용하여 클립보드에 데이터를 복사하는 방법을 알아보았습니다. 이제 클라이언트 측에서 테이블 데이터를 보다 효율적으로 관리할 수 있게 되었습니다.