HTMLのテーブルでソートする方法をサンプルコード付き解説!

HTMLのテーブルはhtmlファイルに記述しただけでは、順番を変えたりすることはできません。JavaScriptを用いることで表示を変えたりすることができます。この記事ではJavaScript(jQuery)を用いて、テーブルをソートする方法を解説しています。

コンテンツ [表示]

  1. 1HTMLのテーブルでソートさせたい
  2. 2HTMLのテーブルでソートする方法
  3. 2.1HTMLでテーブルを作成
  4. 2.2ソート機能の実装
  5. 3まとめ

HTMLのテーブルでソートさせたい

HTMLファイルを作成して表テーブルを表示させた場合、そのままでは順番を変えたりすることはできません。

テーブルでソートしたい場合には、JavaScriptやそのライブラリであるjQueryを使うことで実現できます。

テーブルでソートさせるためのJavaScriptのプラグインがいくつか公開されていますが、今回は公開されているプラグインは使わずにテーブルのソート機能を実装する方法を解説していきたいと思います。

Photo byPexels

HTMLのテーブルでソートする方法

テーブルでソートする機能を実装したサンプルコードを紹介し、順番に解説していきたいと思います。

テーブルのヘッダをクリックすると、クリックした項目に関して昇順と降順にソートされるようにしていきます。

HTMLでテーブルを作成

まずはHTMLでソート対象となるテーブルを作成します。

index.html

<table id="table" class="table table-info table-striped table-bordered">
  <thead>
    <tr>
      <th id="0" data-sort="">id</th>
      <th id="1" data-sort="">name</th>
      <th id="2" data-sort="">price</th>
      <th id="3" data-sort="">ranking</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>CD</td>
      <td>1000</td>
      <td>3</td>
    </tr>
    <tr>
      <td>2</td>
      <td>towel</td>
      <td>1200</td>
      <td>2</td>
    </tr>
    <tr>
      <td>3</td>
      <td>flag</td>
      <td>800</td>
      <td>1</td>
    </tr>
    <tr>
      <td>4</td>
      <td>T-shirt</td>
      <td>2000</td>
      <td>4</td>
    </tr>
  </tbody>
</table><!-- #table -->

ソート機能を実装する前の準備を行います。

thタグに一番左から0とした列の順番をid属性の値に設定します。

また、昇順か降順かを指定するためにdata-sortカスタム属性に初期状態として値を設定しない状態で設定します。

tbodyにはtrタグごとに任意のデータを準備します。

また、Bootstrapを用いてデザインするためにtableタグにクラスを与えています。

これでHTMLでの準備は終了です。

ソート機能の実装

今回、jQueryを用いてテーブルのソート機能を実装していきたいと思います。

jQuery

/**
  * クリックイベント
  */
$('th').click(function(){
  // 情報取得
  let ele = $(this).attr('id');
  let sortFlg = $(this).data('sort');

  // リセット
  $('th').data('sort', "");

  // ソート順序
  if(sortFlg == "" || sortFlg == "desc"){
    sortFlg = "asc";
    $(this).data('sort', "asc");
  }else{
    sortFlg = "desc";
    $(this).data('sort', "desc");
  }

  // テーブルソート処理
  sortTable(ele, sortFlg);
});

前述の通り、テーブルのヘッダをクリックするとソートされるように、thタグにクリックイベントを設定しています。

イベント発火後の処理で情報を取得し、その情報を元にソート行います。

また、情報取得後にはsortカスタム属性をリセットするようにします。

定義したsortTable関数にクリックした要素のid属性の値とソート順序を指定したフラグを引数として渡します。

index.js

/**
  * テーブルソートメソッド
  * 
  * @param ele 
  * @param sortFlg 
  */
function sortTable(ele, sortFlg){
  let arr = $('table tbody tr').sort(function(a, b){
    // ソート対象が数値の場合
    if($.isNumeric($(a).find('td').eq(ele).text())){
      let aNum = Number($(a).find('td').eq(ele).text());
      let bNum = Number($(b).find('td').eq(ele).text());

      if(sortFlg == "asc"){
        return aNum - bNum;
      }else{
        return bNum - aNum;
      }
    }else{ // ソート対象が数値でない場合
      let sortNum = 1;

      // 比較時は小文字に統一
      if($(a).find('td').eq(ele).text().toLowerCase() > $(b).find('td').eq(ele).text().toLowerCase()){
        sortNum = 1;
      }else{
        sortNum = -1;
      }
      if(sortFlg == "desc"){
        sortNum *= (-1);
      }

      return sortNum;
    }
  });
  $('table tbody').html(arr);
}

実際にテーブルのソートを行う機能の関数を実装していきます。

ここで重要になるのが、sortメソッドです。

sortメソッドは配列オブジェクトのソートを行うメソッドです。引数に何も指定しなければ配列の要素を昇順に並び替えますが、引数にコールバック関数を渡すことでそのコールバック関数の中でソートの方法を定義することができます。
 

あわせて読みたい
eq()
jQueryの.eq()はセレクタにマッチした要素郡の中から引数で指定した整数の順番の要素に対しての絞り込みを行います。要素を絞り込みjQueryで処理対象となる要素を変更する(横断)際に利用します。.eq()の使いい方をサンプルコード付きで解説します。

コールバック関数に指定している引数a,bは配列の要素が順に渡されます。

sortメソッドはコールバック関数の中で返す戻り値によってソート方法が変わります。

  • 0より小さい場合、abの前にする。
  • 0に等しい場合、そのままにする。
  • 0より大きい場合、baの前にする。

sortTable関数に渡した引数sortFlga,bの値に応じて、上記のような戻り値を返すように条件分岐を行います。
また、ソート対象が数値とそれ以外の場合で処理を分けています。

最後に、ソート処理を行った後の配列がarr配列に格納されて、arr配列をtableタグのtbodyタグの中身に反映されることでテーブルのソートが完了します。

まとめ

今回、HTMLのテーブルでソートする方法を解説しました。ソートはテーブルに限らず、実装する機会が多いのです。

サンプルコードを参考にして、実際に手を動かしsortメソッドを使いこなせるようになりましょう。

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを7月31日までの期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい!

関連記事

【期間限定】全カリキュラム無料で提供中!

Qumeru[クメル]ではプログラミング学習の全カリキュラムを7月31日まで期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひお試し下さい!

目次

みぎさん
ライター

みぎさん

大阪府の現役システムエンジニアです。WEB制作やWEB開発、ライティングなど幅広く活動しております。 【言語/FW】HTML,CSS,Sass,JavaScript,jQuery,Vue.js,PHP,WordPress,Laravel,Java