ソート・並び替えは、一旦、表示を全て消して、配列の中身を並び替えて再表示しています。ソートの関数はarr.sort(function(a, b){});を使います。
並び替え関数
function compare(a, b) {
if (a is less than b by some ordering criterion) {
return -1;
}
if (a is greater than b by the ordering criterion) {
return 1;
}
// a must be equal to b
return 0;
}
リフェレンス:https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/sort
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>テーブルのソート機能</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="css/styles.css"> <style> </style> </head> <body> <table> <thead> <tr> <th data-type="string">Name</th> <th data-type="string">Team</th> <th data-type="number">Score</th> </tr> </thead> <tbody> <tr> <td>murakami</td> <td>orange</td> <td class="score">35</td> </tr> <tr> <td>Kuriyama</td> <td>orange</td> <td class="score">5</td> </tr> <tr> <td>murata</td> <td>Yellow</td> <td class="score">77</td> </tr> <tr> <td>sakurai</td> <td>green</td> <td class="score">68</td> </tr> <tr> <td>midokura</td> <td>yellow</td> <td class="score">48</td> </tr> <tr> <td>kimoto</td> <td>green</td> <td class="score">97</td> </tr> </tbody> </table> <div> </div> <script src="js/main.js"> </script> </body> </html>
js.main.js
(function(){
'use strict';
var ths = document.getElementsByTagName('th');
var sortOrder = 1;
function rebuildTobody(rows){
var tbody = document.querySelector('tbody');
while(tbody.firstChild){
tbody.removeChild(tbody.firstChild);
}
var i;
for(i = 0; i < rows.length; i++){
tbody.appendChild(rows[i]);
}
}
function updateClassName(th){
var k;
for(k = 0; k < ths.length; k++){
ths[k].className = '';
}
th.className = sortOrder === 1 ? 'asc' : 'desc';
}
function compare(a, b, col, type){
var _a = a.children[col].textContent;
var _b = b.children[col].textContent;
if (type === "number"){
_a = _a * 1;
_b = _b * 1;
}
else if (type === "string") {
_a = _a.toLowerCase();
_b = _b.toLowerCase();
}
if (_a < _b){
return -1;
}
if (_a > _b) {
return 1;
}
return 0;
}
function sortRows(th){
var rows = Array.prototype.slice.call(document.querySelectorAll('tbody > tr'));
var col = th.cellIndex;
var type = th.dataset.type;
rows.sort(function(a, b){
return compare(a, b, col, type) * sortOrder;
});
return rows;
}
function setup(){
var i;
for (i = 0; i < ths.length; i++){
ths[i].addEventListener('click', function(){
var rows;
rows = sortRows(this);
rebuildTobody(rows);
updateClassName(this);
sortOrder *= -1;
});
}
}
setup();
})();
css/styles.css
body {
font-size: 16px;
font-family: Verdana, sans-serif;
}
table {
width: 540px;
margin: 20px auto;
border-collapse: collapse;
}
th, td {
width: 180px;
box-sizing: border-box;
border: 1px solid #e9eae8;
padding: 8px 20px;
}
tbody tr:nth-child(odd){
background: #f8f8f8;
}
.score {
text-align:right;
}
th {
cursor: pointer;
}
th:after {
content: '\f0dc';
font-family: FontAwesome;
font-size: 12px;
color: #ccc;
float: right;
padding-top: 4px;
font-weight: normal;
}
th.asc:after {
content: '\f0de';
font-family: FontAwesome;
color: #000;
}
th.desc:after {
content: '\f0dd';
font-family: FontAwesome;
color: #000;
}
