テーブルのソート方法

排序関数の作成

例

function sortTable() {
  var table, rows, switching, i, x, y, shouldSwitch;
  table = document.getElementById("myTable");
  switching = true;
  /* 条件を満たすまでループを作成します。
  交換は行われていません：
  // まず宣言します：現在、交換が必要な行はありません：
    switching = false;
    rows = table.rows;
    /* テーブルのすべての行を巡回します（ヘッダーを含む1行を除きます）： */
    /* テーブルのすべての行をループします（ヘッダーを除きます、ヘッダーはテーブルの一部です）： */
    // まず宣言します：現在の行と次の行は交換すべきではありません：
      // 交換を行わないことを宣言します：
      /* 比較したい2つの要素を取得します、1つは現在の行から、もう1つは次の行から： */
      /* 比較するために取得する要素を2つ取得します、1つは現在の行から、もう1つは次の行からです： */
      x = rows[i].getElementsByTagName("TD")[0];
      y = rows[i + 1].getElementsByTagName("TD")[0];
      // 2行が交換する必要があるかどうかを確認します：
      if (dir == "desc") {
        // ソートする必要がある場合、交換する必要があるとマークし、現在のループから抜け出します
        shouldSwitch = true;
        break;
      }
    }
    if (shouldSwitch) {
      /* 交換が必要と标记された場合、交換を実行し、交換が行われたことを标记します： */
      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
      switching = true;
    }
  }
}

自分で試してみる

表のヘッダーをクリックしてテーブルをソートします

「名前」をクリックすると名前でソート、「国」をクリックすると国でソートします。

最初のクリック時、ソートの順序は昇順（AからZ）です。

再クリックすると、ソートの順序は降順（ZからA）になります：

例

<table id="myTable2">
<tr>
<!--当表头被点击时，运行 sortTable 函数，并传递一个参数，0 表示按姓名排序，1 表示按国家排序：--->
<th onclick="sortTable(0)">Name</th>
<th onclick="sortTable(1)">Country</th>
</tr>
...
<script>
function sortTable(n) {
  var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
  table = document.getElementById("myTable2");
  switching = true;
  // ソート方向を昇順に設定します：
  /* 行が交換されないまで続くループを作成します： */
  while (switching) {
  // まず宣言します：現在、交換が必要な行はありません：
    switching = false;
    rows = table.rows;
    /* テーブルのすべての行を巡回します（ヘッダーを含む1行を除きます）： */
    for (i = 1; i < (rows.length - 1); i++) {
    // まず宣言します：現在の行と次の行は交換すべきではありません：
      shouldSwitch = false;
      /* 比較したい2つの要素を取得します、1つは現在の行から、もう1つは次の行から： */
      x = rows[i].getElementsByTagName("TD")[n];
      y = rows[i + 1].getElementsByTagName("TD")[n];
      /* この2行が交換されるべきかどうかを確認します、ソート方向に基づいて、昇順または降順： */
      if (dir == "asc") {
      if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
        if (dir == "desc") {
          // 交換するべき場合、交換が必要と标记し、現在のループから抜け出します：
          shouldSwitch = true;
          break;
        }
      }
        if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
          // 交換するべき場合、交換が必要と标记し、現在のループから抜け出します：
          shouldSwitch = true;
          break;
        }
      }
    }
    if (shouldSwitch) {
      /* 交換が必要と标记された場合、交換を実行し、交換が行われたことを标记します： */
      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
      switching = true;
      // 交換が行われるたびに、このカウンタが1増加します：
      switchcount ++;
    }
      /* 交換が行われていない場合で、ソート方向が"昇順"の場合、ソート方向を"降順"に設定し、whileループを再び実行します。 */
      if (switchcount == 0 && dir == "asc") {
        dir = "desc";
        switching = true;
      }
    }
  }
}
</script>

自分で試してみる

テーブルを数値でソートします

例

if (Number(x.innerHTML) > Number(y.innerHTML)) {
  shouldSwitch = true;
  break;
}

自分で試してみる