TableSorter는 JavaScript를 사용하여 HTML 테이블을 정렬하고 관리하는 유용한 라이브러리입니다. 이 라이브러리를 사용하여 테이블 내의 셀을 병합하거나 분할하는 방법을 알아보겠습니다.

셀 병합하기

셀을 병합하려면 colspan 및 rowspan 속성을 사용하여 HTML 테이블을 작성해야 합니다. 그런 다음 TableSorter의 textExtraction 함수를 사용하여 병합된 셀에 대한 데이터를 전달해야 합니다. 다음은 실제 코드 예시입니다.

<table id="myTable" class="tablesorter">
  <thead>
    <tr>
      <th>컬럼1</th>
      <th>컬럼2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td rowspan="2">데이터1</td>
      <td>데이터2</td>
    </tr>
    <tr>
      <td>데이터3</td>
    </tr>
  </tbody>
</table>

$(document).ready(function () {
  $("#myTable").tablesorter({
    textExtraction: {
      0: function (node, table, cellIndex) {
        return $(node).text();
      },
      1: function (node, table, cellIndex) {
        return $(node).text();
      },
    },
  });
});

셀 분할하기

셀을 분할하려면 TableSorter의 사용자 정의 파서를 활용하여 셀을 분할할 수 있습니다. 다음은 셀 분할을 위한 사용자 정의 파서의 예시입니다.

$.tablesorter.addParser({
  id: "splitCell",
  format: function (s, table, cell, cellIndex) {
    // 셀 분할 로직 구현
    return s;
  },
  parsed: false,
  type: "text",
});

위의 format 함수 내에서 셀 분할을 위한 로직을 구현하고, 해당 파서를 이용하여 테이블을 초기화합니다.

셀의 병합 및 분할을 통해 테이블 데이터를 보다 유연하게 관리할 수 있습니다. TableSorter를 이용하여 이러한 작업을 간단히 처리할 수 있습니다.

참고 문헌:

• TableSorter 공식 문서
• jQuery 공식 홈페이지