テーブルのソート – ソフトウェアエンジニアの技術ブログ：Software engineer tech blog

ソート・並び替えは、一旦、表示を全て消して、配列の中身を並び替えて再表示しています。ソートの関数は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;
}