[javascript] TableSorter를 이용한 테이블의 데이터를 HTML 형식으로 저장하기

18 Dec 2023

javascript

이번에는 JavaScript 라이브러리인 TableSorter를 사용하여 HTML 테이블의 데이터를 HTML 형식으로 저장하는 방법을 알아보겠습니다.

TableSorter란 무엇인가?

TableSorter는 HTML 테이블을 정렬하고 필터링할 수 있는 강력한 JavaScript 플러그인입니다. 이 플러그인을 사용하면 테이블의 행을 클릭하거나 드래그하여 손쉽게 정렬할 수 있습니다.

이제 TableSorter를 사용하여 데이터를 HTML 형식으로 저장하는 방법에 대해 알아보겠습니다.

TableSorter를 이용한 테이블 데이터 저장하기

우선, TableSorter를 테이블에 적용합니다. 그런 다음 데이터를 저장할 버튼을 만들고 해당 버튼을 클릭했을 때 테이블 데이터를 HTML 형식으로 저장하는 JavaScript 함수를 작성합니다.

$(document).ready(function(){
  // TableSorter 플러그인을 테이블에 적용
  $('#myTable').tablesorter();

  // 데이터를 HTML 형식으로 저장하는 함수
  function exportTableToHTML(){
    var html = $('#myTable').clone().wrap('<div></div>').parent().html();
    // 데이터를 저장할 수 있도록 새 창을 열어 HTML 형식으로 출력
    var newWindow = window.open();
    newWindow.document.write('<html><head><title>Table Data</title></head><body>');
    newWindow.document.write(html);
    newWindow.document.write('</body></html>');
    newWindow.document.close();
  }

  // 버튼 클릭 시 데이터를 HTML 형식으로 저장하는 함수 호출
  $('#exportButton').click(function(){
    exportTableToHTML();
  });
});

위 코드에서는 TableSorter 플러그인을 테이블에 적용한 후, ‘exportButton’이라는 버튼을 클릭했을 때 테이블 데이터를 HTML 형식으로 저장하는 exportTableToHTML 함수를 작성했습니다.

결론

TableSorter를 사용하면 테이블의 데이터를 정렬하고 필터링하는 것뿐만 아니라, 원하는 형식으로 데이터를 저장하는 것도 쉽게 할 수 있습니다. 이를 통해 사용자들은 필요한 데이터를 HTML 형식으로 저장하여 자유롭게 활용할 수 있습니다.

참고 문헌:

https://tablesorter.com/docs/