[Javascript] Table 태그 정렬하기

table 의 tr 태그를 기준으로 정렬하는 기능을 구현하는 방법에 대해 간략히 알아보겠습니다.

 

1. table 태그 작성

<table border="1px solid black">
    <thead>
        <tr>
		<td onclick="javascript: setSorting('0');">번호</td>
		<td onclick="javascript: setSorting('1');">타이틀</td>
		<td onclick="javascript: setSorting('2');">작성자</td>
		<td onclick="javascript: setSorting('3');">작성일</td>
        </tr>
    </thead>
    <tbody id="itemList" >
    	<tr>
		<td>1</td>
		<td>Javascript</td>
		<td>홍길동</td>
		<td>20240708</td>
        </tr>
        <tr>
		<td>2</td>
		<td>Spring</td>
		<td>김철수</td>
		<td>20240706</td>
        </tr>
        <tr>
		<td>3</td>
		<td>Oracle</td>
		<td>이영수</td>
		<td>20240707</td>
        </tr>
        <tr>
		<td>4</td>
		<td>Redis</td>
		<td>가나다</td>
		<td>20240701</td>
        </tr>
    </tbody>
</table>

2. Javascript 작성

let sortType = 'asc'; 
let sortColumn = -1;

function setSorting(columnIndex){
    var table, rows, switching, i, x, y;

    // 정렬타입 지정하기
    if (sortColumn === columnIndex) {
        sortType = (sortType === 'asc') ? 'desc' : 'asc';
    } else {
        sortType = 'asc';
    }
    sortColumn = columnIndex;

    table = document.getElementById("itemList");
    rows = Array.from(table.getElementsByTagName("tr"));

    rows.sort(function(a, b) {
        x = a.getElementsByTagName("td")[columnIndex].textContent.trim();
        y = b.getElementsByTagName("td")[columnIndex].textContent.trim();

        // 숫자비교
        var xNum = parseFloat(x.replace(/,/g, ''));
        var yNum = parseFloat(y.replace(/,/g, ''));
		
		console.log(xNum);
		console.log(yNum);

        if (!isNaN(xNum) && !isNaN(yNum)) {
            if (sortType === "asc") {
                return xNum - yNum;
            } else {
                return yNum - xNum;
            }
        } 

        // 문자비교
        else {
            if (sortType === "asc") {
                return x.localeCompare(y, 'en', { sensitivity: 'base', ignorePunctuation: true });
            } else {
                return y.localeCompare(x, 'en', { sensitivity: 'base', ignorePunctuation: true });
            }
        }
    });

    // 테이블 다시 그리기
    for (i = 0; i < rows.length; i++) {
        table.appendChild(rows[i]);
    }
}

 

3. 실행화면

thead를 1번 누르면 오름차순, 2번 누르면 내림차순으로 정렬되는 것을 확인할 수 있습니다.


감사합니다.