【JavaScript】テーブル並べ替え

①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>