テーブルソート（テキストボックス内）

参照：https://qumeru.com/magazine/463
実験対象バージョン：HTML5、CSS3

サンプル
ソース

サンプル

id	name	price	ranking
aaaa bbb	CD	1000	3
	towel	1200	2
	flag	800	1
	T-shirt	2000	4

テーブル直のソートはあるが、inputで入力された値のソートはなかなかないので、作成。
数字的であれば上手くいっているのは確認しています。
文字はどうでしょう(笑)

ソース

javascript

              $(function () {

                /**
                 * クリックイベント
                 */
                $('th').click(function () {
                  // 情報取得（列数）
                  let ele = $(this).attr('id');
                  //後ろから1文字目を取得
                  ele = ele.substr(-1, 1);
                  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);
                });
            
                /**
                 * テーブルソートメソッド
                 * 
                 * @param ele 
                 * @param sortFlg 
                 */
                 function sortTable(ele, sortFlg) {
                  let arr = $('#table tbody tr').sort(function (a, b) {
            
                 // let arr = $('table tbody tr').sort(function (a, b) {
                    // ソート対象が数値の場合
                    if ($.isNumeric($(a).find('input').eq(ele)[0].value)) {
                      //列＜td＞までなので、inputまでの一つ[0]を追加
                      let aNum = Number($(a).find('input').eq(ele)[0].value);
                      let bNum = Number($(b).find('input').eq(ele)[0].value);
            
                      if (sortFlg == "asc") {
                        return aNum - bNum;
                      } else {
                        return bNum - aNum;
                      }
                    } else {
                      // ソート対象が数値でない場合
                      let sortNum = 1;
            
                      // 比較時は小文字に統一
                      if ($(a).find('input').eq(ele).value > $(b).find('input').eq(ele).value) {
                        sortNum = 1;
                      } else {
                        sortNum = -1;
                      }
                      if (sortFlg == "desc") {
                        sortNum *= (-1);
                      }
            
                      return sortNum;
                    }
                  });
                  $('#table tbody').html(arr);
                }
            
              });

10行目は、テーブルの列数を取る際にid="××0"となっている場合に必要なものです。
id="0"などで対応していれば不要な箇所です。

36、67行目にあるテーブルのidを設定しないと違うテーブルが範囲に入るので注意が必要です。
テーブルのidを指定してあげると影響がないことを確認出来ました。
upする際に影響が出て模索しました(笑)

HTML

id="××列数"で記載が必須のようです。
その為、idの値を数字ではない値にする場合は、適宜javascript側の調整が必要です。
あまり影響がないなら「id=”列数”」にすることをおすすめします。

テーブルのidの指定が必須になりました。