テーブル並べ替え①

①JavaScriptのarray.sort()は、要素を文字列として並べ替えます。つまり、数値の場合「1, 10, 11, 2, …」の順番になります。要素が数字の場合は数値として並べ替える（1, 2, …, 10, 11）ように指定しました。

②通常の並べ替えを行った場合、空白（null）が先頭に来てしまいます。昇順のときは空白が末尾、降順のときは空白が先頭に来るように、処理を追加しました。

③並べ替えられた後のデータの順番を知りたい。左端にNo列があることを前提としたコーディング例。

<script>
'use strict'
window.onload = function () {
  document.querySelectorAll('table').forEach(function(table) {
    if (table.tHead) {
      table.tHead.querySelectorAll('th').forEach(function(th) {
        th.classList.toggle('asc');
        th.onclick = function(e) {
          if (e.target.textContent != 'No') {
            e.target.classList.toggle('asc');
            e.target.classList.toggle('desc');
          }
          var cells = new Array();
          for (let i = 0; i < table.tBodies[0].rows.length; i++) {
            var cell = new Object();
            cell.row = table.tBodies[0].rows[i];
            cell.key = table.tBodies[0].rows[i].cells[e.target.cellIndex].textContent;
            cells.push(cell);
          }
          if (e.target.classList.contains('desc')) {
            cells.sort(desc);
          } else {
            cells.sort(asc);
          }
          for (let i = 0; i < cells.length; i++) {
            cells[i].row.cells[0].textContent = i + 1;
            table.tBodies[0].appendChild(cells[i].row);
          }
        };
      });
    }
  });
};
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>