table의 head 버튼을 클릭하여 정렬하기

테이블에 있는 row 데이터들을 컬럼별 정렬하기 위해 오름차순, 내림차순 버튼이 각 컬럼의 th에 위치할 때 동작 코드이다.

 

 

function sortTable(columnIndex, direction) {
    const tbody = document.getElementById('myTable');
    const rows = Array.from(tbody.querySelectorAll("tr"));

    // 행 정렬
    rows.sort((a, b) => {
        const aValue = getCellValue(a.cells[columnIndex]);
        const bValue = getCellValue(b.cells[columnIndex]);

        if (direction == 'asc') {
            return aValue.localeCompare(bValue);
        } else {
            return bValue.localeCompare(aValue);
        }
    });

    // 정렬된 행을 다시 테이블에 추가
    rows.forEach(row => tbody.appendChild(row));
}

// 셀의 값 가져오기
function getCellValue(cell) {
    return cell.textContent || cell.innerText;
}

 

Array.from(tbody.querySelectorAll("tr")) : tbody의 모든 tr 요소를 찾아 배열에 할당해준다.

rows.sort((a, b) => {...}) : sort 메서드를 사용하여 aValue는 a행에서 지정된 열의 값을 가져오고 bValue는 b행에서 지정된 열의 값을 가져온 후 direction에 따라 비교한다.

 

 **Array.prototype.sort() 메서드 구문에 대해

array.sort([compareFunction])

array : 정렬할 배열

compareFunction : 정렬 순서를 지정하는 함수이며 위 코드의 경우 localeCompare 비교 함수를 통해 아래와 같이 정렬한다.

• 반환 값이 0보다 작으면 a를 b보다 앞으로 정렬
• 반환 값이 0이면 a와 b의 위치 유지
• 반환 값이 0보다 크면 a를 b보다 뒤로 정렬

 

getCellValue 함수 : 브라우저 호환성을 고려하여 textContent를 가져오고 만약 없으면 innerText를 사용한다.

 

 

<th>
    column1
    <button class="up" onclick="sortTable(1,'desc');">
        <span class="hide">내림차순</span>
    </button>
    <button class="down" onclick="sortTable(1,'asc');">
        <span class="hide">오름차순</span>
    </button>
</th>
<th>
    column2
    <button class="up" onclick="sortTable(2,'desc');">
        <span class="hide">내림차순</span>
    </button>
    <button class="down" onclick="sortTable(2,'asc');">
        <span class="hide">오름차순</span>
    </button>
</th>

 

각 컬럼의 th 내에 있는 버튼에 onclick 함수를 부여하여 정렬되도록 한다.