자바스크립트 테이블 정렬(table sort JavaScript)
1. 수 단위 구분자',' 무시하고 정렬
2. '수', '문자' 구분해서 정렬기능
3. '오름차순', '내림차순' 정렬 토글기능
4. 정렬 후 '효율적'테이블 재설정
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript">
var index; // cell index
var toggleBool; // sorting asc, desc
function gwanshic(tbody, index){
this.index = index;
if(toggleBool){
toggleBool = false;
}else{
toggleBool = true;
}
var datas= new Array();
var tbodyLength = tbody.rows.length;
for(var i=0; i<tbodyLength; i++){
datas[i] = tbody.rows[i];
}
// sort by cell[index]
datas.sort(compareCells);
for(var i=0; i<tbody.rows.length; i++){
// rearrange table rows by sorted rows
tbody.appendChild(datas[i]);
}
}
function compareCells(a,b) {
var aVal = a.cells[index].innerText;
var bVal = b.cells[index].innerText;
aVal = aVal.replace(/\,/g, '');
bVal = bVal.replace(/\,/g, '');
if(toggleBool){
var temp = aVal;
aVal = bVal;
bVal = temp;
}
if(aVal.match(/^[0-9]+$/) && bVal.match(/^[0-9]+$/)){
return parseFloat(aVal) - parseFloat(bVal);
}
else{
if (aVal < bVal){
return -1;
}else if (aVal > bVal){
return 1;
}else{
return 0;
}
}
}
</script>
<style>
table, th, td {
border: 1px solid black;
}
</style>
<title>Gwanshic</title>
</head>
<body>
<table summary="Pioneer">
<thead>
<tr>
<th scope="col" onclick="gwanshic(tbody01, 0)">No.</th>
<th scope="col" onclick="gwanshic(tbody01, 1)">Name</th>
<th scope="col" onclick="gwanshic(tbody01, 2)">Belong</th>
<th scope="col" onclick="gwanshic(tbody01, 3)">Current Networth</th>
<th scope="col" onclick="gwanshic(tbody01, 4)">BirthDay</th>
</tr>
</thead>
<tbody id="tbody01">
<tr>
<td>1</td>
<td>Gwanshic Yi</td>
<td>Gwanshic Home</td>
<td>120,000</td>
<td>1982-03-20</td>
</tr>
<tr>
<td>2</td>
<td>Steve Jobs</td>
<td>Apple</td>
<td>19,000,000,000</td>
<td>1955-02-24</td>
</tr>
<tr>
<td>3</td>
<td>Bill Gates</td>
<td>MicroSoft</td>
<td>84,300,000,000</td>
<td>1955-10-28</td>
</tr>
<tr>
<td>4</td>
<td>Larry Page</td>
<td>Google</td>
<td>39,100,000,000</td>
<td>1973-03-26</td>
</tr>
</tbody>
</table>
</body>
</html>