はじめに
この記事ではtableタグの一覧をjavascriptでソートするだけの機能を備忘録もかねて記載しています。
ソース内容
百聞は一見に如かず、ソースは以下の通りです。
index.html
<html>
<head>
<meta charset="utf-8">
<title>タイトル</title>
</head>
<body>
<table>
<thead>
<tr>
<th>name</th>
<th>num</th>
<th data-override="Score">price</th></tr>
</thead>
<tbody id="target_table">
<tr>
<td>りんご</td>
<td>3個</td>
<td data-override="disqualified">300円</td></tr>
<tr>
<td>なし</td>
<td>2000個</td>
<td>2億円</td></tr>
<tr>
<td>すいか</td>
<td>1個</td>
<td>500円</td></tr>
<tr>
<td>青春</td>
<td>1回</td>
<td>プライスレス</td></tr>
</tbody>
</table>
</body>
<script src="script.js"></script>
</html>
script.js
// tableタグを取得
var target = document.getElementById("target_table");
var rowElements = target.rows;
// 取得したデータをpriceでソートする
var result =Array.from(rowElements).sort(function(line1, line2) {
return (line1.cells[2].innerText < line2.cells[2].innerText) ? -1 : 1; //オブジェクトの昇順ソート
});
// ソートしたデータを挿入（移動）
for(var i = 0; i < result.length; i++){
target.appendChild(result[i]);
}
これで、以下の画像のようにpriceでソートされる。
※単純に文字列で比較しているので、この順序になっている。