[jQuery] プラグインを使わずにテーブルをソートするサンプル(降順、昇順)

jQueryでテーブルの並び順を変更するサンプルを作成しましたのでご紹介╰(*´︶`*)╯。

テーブルのヘッタを一度クリックすると表が降順にソートし、もう一度クリックすると昇順にソートする仕様です。

 

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf8">
    <title>sum price</title>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th id="0">商品<span id="sort0" sort=""></span></th>
          <th id="1">価格<span id="sort1" sort=""></span></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>キーボード</td>
          <td class="price">15000</td>
        </tr>
        <tr>
          <td>マウス</td>
          <td class="price">6000</td>
        </tr>
        <tr>
          <td>モニター</td>
          <td class="price">50000</td>
        </tr>
        <tr>
          <td>デスクトップPC</td>
          <td class="price">200000</td>
        </tr>
         <tr>
          <td>プリンター</td>
          <td class="price">40000</td>
        </tr>
      </tbody>
    </table>
  </body>
  <div>
    <p class="sum_price">合計:0円</p>
  </div>
</html>

CSS

body {
  background-color: #a3d5d3;
  font-family: 'Helvetica', 'Arial', sans-serif;
  width: 450px;
  margin: 0 auto;
  padding: 20px;
}

table, input {
 margin: 5px;
}

input[type=text] {
 width: 120px;
}

table,tr,th,td {
  font-size: 20px;
  width: 70%;
  list-style-type: none;
  border-radius: 3px;
  border: 1px solid #000;
  padding: 5px;
}

td {
  background: #eeeff0;
  padding-left: 15px;
}

.display-none{
    display:none;
}

Javascript

$(function(){
  // 画面表示時に価格の合計値を計算
  var sum_price = sum();

  // カラムのクリックイベント
  $("th").click(function(){
    // ★span要素の独自属性(sort)の値を取得
    var sortClass = $(this).find("span").attr("sort");
    var sortFlag = "asc";
    // 初期化
    $("table thead tr span").text("");
    $("table thead tr span").attr("sort", "");

    if(isBlank(sortClass) || sortClass == "asc") {
      $(this).find("span").text("▼");
      // ★独自属性(sort)の値を変更する
      $(this).find("span").attr("sort", "desc");
      sortFlag = "desc";
    } else if(sortClass == "desc") {
      $(this).find("span").text("▲");
      $(this).find("span").attr("sort", "asc"); 
      sortFlag = "asc";
    }

    var element = $(this).attr("id");
    sort(element, sortFlag);
  });


  /******** 共通関数 ********/
  function sort(element, sortFlag) {
    // ★sort()で前後の要素を比較して並び変える。※対象が文字か数値で処理を変更
    var arr = $("table tbody tr").sort(function(a, b) {
      if ($.isNumeric($(a).find("td").eq(element).text())) {
        // ソート対象が数値の場合
        var a_num = Number($(a).find("td").eq(element).text());
        var b_num = Number($(b).find("td").eq(element).text());

        if(isBlank(sortFlag) || sortFlag == "desc") {
          // 降順
          return b_num - a_num;
        } else {
          // 昇順
          return a_num - b_num;
        }
      } else {
        // ソート対象が数値以外の場合
        var sortNum = 1;
        if($(a).find("td").eq(element).text() 
             > $(b).find("td").eq(element).text()) {
          sortNum = 1;
        } else {
          sortNum = -1;
        }
        if(isBlank(sortFlag) || sortFlag == "desc") {
          // 降順
          sortNum *= (-1) ;
        }

        return sortNum;
      }
    });
    // ★html()要素を置き換える
    $("table tbody").html(arr);
  }

  function sum(){
    // 表の金額を取得する(tdの奇数列を取得)
    var pricelist = $("table td[class=price]").map(function(index, val){
      var price = parseInt($(val).text());
      if(price >= 0) {
        return price;
      } else {
        return null;
      }
    });
    // 価格の合計を求める
    var total = 0;
    pricelist.each(function(index, val){
      total = total + val;
    });
    $(".sum_price").text("合計:"+total+"円");
  }

  //バリデーションチェック
  function isBlank(data){
    if (data.length ==0 || data == ''){
      return true;
    } else {
      return false;
    }
  }
});

サンプル

 

【point!!】

 $(this).find("span"):
  すべての要素からspan要素を探して取得する

 $(this).find("span").attr("sort");:
  span要素の独自属性(sort)の値を取得する

 $(this).find("span").attr("sort", "asc"); :
  span要素の独自属性(sort)の値を変更する

 $("××").sort(function(a, b) {…}:
  sort()で前後の要素を比較して並び変える。※対象が文字か数値で処理を変更 

 $("××").html(arr);:
  要素を置き換える



投稿日:2019-11-22    更新日:2019-12-05

[スポンサーリンク]

  
関連記事
勉強した内容を緩くメモする|JBの技術メモ
勉強した内容を緩くメモする|JBの技術メモ
勉強した内容を緩くメモする|JBの技術メモ
勉強した内容を緩くメモする|JBの技術メモ
勉強した内容を緩くメモする|JBの技術メモ
勉強した内容を緩くメモする|JBの技術メモ
サイト内検索
プロフィール

プロフィール

[Name : じゃぶじゃぶ(@jbjb_2019)]
都内で社内SEをしているおじさん。
仕事で得られる知識だけでは限界を感じ、 WEBの勉強がてらITブログを開始。
サーバからWEBサイトまでフルスクラッチで開発しました。
現在は勉強のモチベーションを保つために活用中。
興味があることを雑記的に書いていきます。

[スポンサーリンク]

[スポンサードリンク]

最近の記事