[javascript] 자바스크립트로 TableSorter 구현하기

18 Dec 2023

javascript

웹 페이지에서 테이블을 효과적으로 정렬할 수 있게 하는 TableSorter를 자바스크립트로 구현할 수 있습니다. 이 글에서는 자바스크립트를 사용하여 간단한 TableSorter를 만드는 방법을 살펴보겠습니다.

준비물

테이블을 정렬하기 위해 먼저 HTML 문서에 테이블을 생성해야 합니다. 테이블은 각 헤더열(칼럼)을 클릭하여 정렬할 수 있도록 되어야 합니다.

<table id="myTable">
  <thead>
    <tr>
      <th onclick="sortTable(0)">Name</th>
      <th onclick="sortTable(1)">Age</th>
      <th onclick="sortTable(2)">Country</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>25</td>
      <td>USA</td>
    </tr>
    <tr>
      <td>Peter</td>
      <td>30</td>
      <td>UK</td>
    </tr>
    <tr>
      <td>Anne</td>
      <td>20</td>
      <td>Canada</td>
    </tr>
  </tbody>
</table>

자바스크립트로 TableSorter 만들기

이제 자바스크립트를 사용하여 TableSorter를 만들어보겠습니다. 아래는 간단한 TableSorter 함수입니다.

function sortTable(columnIndex) {
  var table, rows, switching, i, x, y, shouldSwitch;
  table = document.getElementById("myTable");
  switching = true;
  while (switching) {
    switching = false;
    rows = table.rows;
    for (i = 1; i < (rows.length - 1); i++) {
      shouldSwitch = false;
      x = rows[i].getElementsByTagName("td")[columnIndex];
      y = rows[i + 1].getElementsByTagName("td")[columnIndex];
      if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
        shouldSwitch = true;
        break;
      }
    }
    if (shouldSwitch) {
      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
      switching = true;
    }
  }
}

이 함수는 클릭된 헤더열(칼럼)에 따라 테이블의 행을 정렬합니다. 텍스트로 된 내용을 기준으로 정렬하기 때문에 숫자나 문자열 모두에 적용할 수 있습니다.

마치며

위의 자바스크립트 함수를 사용하면 간단히 TableSorter를 구현할 수 있습니다. 테이블이나 테이블의 특정 부분에 대해 원하는대로 커스터마이징하여 효율적으로 정렬할 수 있습니다.

이러한 자바스크립트를 기반으로 한 TableSorter를 사용하여 웹 애플리케이션에서 테이블을 직관적이고 효과적으로 정렬하는 기능을 제공할 수 있습니다.

참고 자료: MDN Web Docs - Manipulating documents