[javascript] TableSorter를 이용한 테이블의 데이터를 JSON 형식으로 변환하기

18 Dec 2023

javascript

테이블은 웹 애플리케이션에서 데이터를 효과적으로 표시하고 관리하기 위한 중요한 구성 요소입니다. 테이블의 데이터를 JSON 형식으로 변환하면 테이블에서 수집한 데이터를 다양한 방법으로 활용할 수 있습니다.

이 포스트에서는 JavaScript 라이브러리인 TableSorter를 사용하여 HTML 테이블의 데이터를 JSON 형식으로 변환하는 방법을 살펴보겠습니다.

TableSorter란?

TableSorter는 사용자가 테이블의 열을 정렬하고 필터링할 수 있는 강력한 jQuery 플러그인입니다. 이 라이브러리를 사용하면 테이블의 데이터를 보기 쉽고 관리하기 좋은 형식으로 표시할 수 있습니다.

TableSorter는 다수의 다양한 데이터 유형을 지원하며, 테이블의 열을 클릭하거나 드래그하여 데이터를 쉽게 정렬할 수 있습니다. 또한 사용자가 필요에 따라 테이블 데이터를 필터링할 수 있는 기능도 제공합니다.

TableSorter를 사용하여 테이블 데이터를 JSON으로 변환하기

다음은 TableSorter를 사용하여 HTML 테이블의 데이터를 JSON으로 변환하는 간단한 예제 코드입니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>TableSorter를 이용한 테이블의 데이터를 JSON으로 변환</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.3/js/jquery.tablesorter.min.js"></script>
  <script>
    $(document).ready(function(){
      $("#myTable").tablesorter();

      $("#convertBtn").click(function(){
        var tableData = [];
        $('#myTable tbody tr').each(function(row, tr){
          tableData[row] = {
            "column1": $(tr).find('td:eq(0)').text(),
            "column2": $(tr).find('td:eq(1)').text(),
            "column3": $(tr).find('td:eq(2)').text()
          }
        });
        console.log(JSON.stringify(tableData));
      });
    });
  </script>
</head>
<body>
  <table id="myTable" class="tablesorter">
    <thead>
      <tr>
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
      </tr>
    </thead>
    <tbody>
      <tr><td>A1</td><td>B1</td><td>C1</td></tr>
      <tr><td>A2</td><td>B2</td><td>C2</td></tr>
      <tr><td>A3</td><td>B3</td><td>C3</td></tr>
    </tbody>
  </table>
  <button id="convertBtn">Convert to JSON</button>
</body>
</html>

위의 코드는 TableSorter를 테이블에 적용하고, “Convert to JSON” 버튼을 누를 때 테이블의 데이터를 JSON 형식으로 변환하는 간단한 예제입니다.

마무리

이제 TableSorter를 사용하여 테이블의 데이터를 JSON 형식으로 변환하는 방법을 알아보았습니다. 이를 통해 웹 애플리케이션에서 테이블 데이터를 효율적으로 활용할 수 있는 기초를 다졌습니다.

TableSorter의 다양한 기능을 활용하여 테이블 데이터 처리에 유용한 방법들을 더 자세히 살펴보시기를 권장합니다.