[자바스크립트] javascript 테이블 정렬하기 (table sort)

javascript를 활용해서 table(테이블)의 순번으로 sort 해보겠습니다.
기본 html의 순서는 1, 3, 2, 4 순서로 정렬되어 있습니다.

 

 

스크립트 함수(sortTable)는 테이블 id와 정렬할 컬럼 번호를 매개변수로 받고 있습니다.
테이블 tr을 for문으로 돌면서 순번을 비교해서 정렬시킵니다.
현재 함수 소스는 오름차순으로 정렬되어 있습니다. 부등호를 바꾸시면 내림차순으로 정렬됩니다.

 

 

<style>
 table {
    width: 100%;
    border: 1px solid #444444;
  }
  th, td {
    border: 1px solid #444444;
	text-align: center;
  }
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<button type="button" onclick="sort();" style="border-style:solid;">정렬하기</button>
<table id="sort_table">
<thead>
	<tr>
		<th>순번</th>
		<th>이름</th>
		<th>시군구</th>
		<th>읍면동</th>
	</tr>
</thead>
<tbody>
	<tr>
		<td>1</td>
		<td>홍길동</td>
		<td>서울특별시</td>
		<td>서초구</td>
	</tr>
	<tr>
		<td>3</td>
		<td>심봉사</td>
		<td>겅기도</td>
		<td>부천시</td>
	</tr>
	<tr>
		<td>2</td>
		<td>심청이</td>
		<td>경기도</td>
		<td>부천시</td>
	</tr>
	<tr>
		<td>4</td>
		<td>이순신</td>
		<td>서울특별시</td>
		<td>강남구</td>
	</tr>
</tbody>
</table>
<script>

function sortTable(table_id, sortColumn){
    var tableData = document.getElementById(table_id).getElementsByTagName('tbody').item(0);
    var rowData = tableData.getElementsByTagName('tr');   
    for(var i = 0; i < rowData.length - 1; i++){
        for(var j = 0; j < rowData.length - (i + 1); j++){
            if(Number(rowData.item(j).getElementsByTagName('td').item(sortColumn).innerHTML.replace(/[^0-9\.]+/g, "")) > Number(rowData.item(j+1).getElementsByTagName('td').item(sortColumn).innerHTML.replace(/[^0-9\.]+/g, ""))){
                tableData.insertBefore(rowData.item(j+1),rowData.item(j));
            }
        }
    }
}
function sort(){
	sortTable("sort_table", 0);
}
</script>