①JavaScriptのarray.sort()は、要素を文字列として並べ替える。つまり、数値の場合「1, 10, 11, 2, …」の順番になる。要素が数字の場合、数値として並べ替える「1, 2, …, 10, 11」ように指定した。
②通常の並べ替えを行った場合、空白(null)が先頭に来る。昇順のとき空白は最後、降順のとき空白が最初に来るように処理を追加した。
③条件によって並べ替えを行った後、指定の列が前回並べ替えられたとき、昇順・降順のどちらでソートされたか、保持するようにした。同じページ内に複数のテーブルが存在するケースを考慮し、テーブル・列のインデックスを配列によって特定する。
④並べ替えられた後のデータの順番を知りたい。左端にNo列があることを前提としたコーディング。
No | 数値1 | 数値2 | 文字1 | 文字2 | 大分類 | 小分類 |
---|---|---|---|---|---|---|
0 | 00 | A | あ | A市 | A町 | |
1 | 01 | B | い | A市 | B町 | |
2 | 02 | C | う | A市 | C町 | |
3 | 03 | D | え | B市 | A町 | |
4 | 04 | E | お | B市 | B町 | |
5 | 05 | F | か | B市 | C町 | |
6 | 06 | G | き | C市 | A町 | |
7 | 07 | H | く | C市 | B町 | |
8 | 08 | I | け | C市 | C町 | |
9 | 09 | J | こ | |||
10 | 10 | K | さ | |||
11 | 11 | L | し | |||
No | 市区町村コード | 区名 | ふりがな | 英語 | 面積 | 人口 |
---|---|---|---|---|---|---|
1 | 14101 | 鶴見区 | つるみく | tsurumi | ||
2 | 14102 | 神奈川区 | かながわく | kanagawa | ||
3 | 14103 | 西区 | にしく | nishi | ||
4 | 14104 | 中区 | なかく | naka | ||
5 | 14105 | 南区 | みなみく | minami | ||
6 | 14106 | 保土ケ谷区 | ほどがやく | hodogaya | ||
7 | 14107 | 磯子区 | いそごく | isogo | ||
8 | 14108 | 金沢区 | かなざわく | kanazawa | ||
9 | 14109 | 港北区 | こうほくく | kohoku | ||
10 | 14110 | 戸塚区 | とつかく | totsuka | ||
11 | 14111 | 港南区 | こうなんく | konan | ||
12 | 14112 | 旭区 | あさひく | asahi | ||
13 | 14113 | 緑区 | みどりく | midori | ||
14 | 14114 | 瀬谷区 | せやく | seya | ||
15 | 14115 | 栄区 | さかえく | sakae | ||
16 | 14116 | 泉区 | いずみく | izumi | ||
17 | 14117 | 青葉区 | あおばく | aoba | ||
18 | 14118 | 都筑区 | つづきく | tsuzuki |
<script>
window.addEventListener('load', function () {
let tbl = initialize();
document.querySelectorAll('table thead th').forEach(th => {
th.onclick = function () {
let colIndex = this.cellIndex;
if (colIndex == 0) return;
let table = this.parentNode.parentNode.parentNode;
let tableIndex = getTableIndex(table);
if (table.rows[0].cells[0].textContent != "No") return;
let cols = new Array;
for (let i = 1; i < table.rows.length; i++) {
let col = new Object;
col.row = table.rows[i];
col.key = table.rows[i].cells[colIndex].textContent;
cols.push(col);
}
if (tbl[tableIndex][colIndex] == -1) {
cols.sort(desc);
} else {
cols.sort(asc);
}
let tbody = this.parentNode.parentNode;
for (let i = 0; i < cols.length; i++) {
tbody.appendChild(cols[i].row);
}
for (let i = 1; i < table.rows.length; i++) {
table.rows[i].cells[0].textContent = i;
}
if (tbl[tableIndex][colIndex] == -1) {
tbl[tableIndex][colIndex] = 1;
} else {
tbl[tableIndex][colIndex] = -1;
}
};
});
});
function initialize() {
let tables = document.getElementsByTagName('table');
let obj = new Array(tables.length);
for (let i = 0; i < tables.length; i++) {
obj[i] = new Array(tables[i].rows[0].cells.length);
}
return obj;
}
function getTableIndex(table) {
let tables = document.getElementsByTagName('table');
for (let i = 0; i < tables.length; i++) {
if (tables[i] == table) {
return i;
}
}
}
function asc(a, b) {
if (a.key == "") return 1;
if (b.key == "") return -1;
if (!isNaN(a.key)) {
if (!isNaN(b.key)) {
return a.key - b.key;
}
}
if (a.key < b.key) return -1;
if (a.key > b.key) return 1;
return 0;
}
function desc(a, b) {
if (a.key == "") return -1;
if (b.key == "") return 1;
if (!isNaN(a.key)) {
if (!isNaN(b.key)) {
return b.key - a.key;
}
}
if (a.key < b.key) return 1;
if (a.key > b.key) return -1;
return 0;
}
</script>
コメント