「行」でテーブルをソートする方法はありますか？

Question

###■やりたいこと
次のようなテーブルがあるとき、縦の列でなく、横の行でソートしたいです。
（鈴木の行をクリックすると、数学の列が左に、国語の列は右になってほしい。）

<table>
     <thead>
          <tr>
               <th data-type="string">名前<span></span></th>
               <th data-type="integer">国語<span></span></th>
               <th data-type="integer">数学<span></span></th>               
          </tr>
     </thead>
     <tbody>
          <tr class="dothesort">
               <td>鈴木</td><td>12</td><td>9</td>
          </tr>
          <tr class="dothesort">
               <td>佐藤</td><td>25</td><td>89</td>
          </tr>
          <tr class="dothesort">
               <td>高橋</td><td>1</td><td>987</td>
          </tr>
          <tr class="dothesort">
               <td>山田</td><td>604</td><td>78</td>
          </tr>
     </tbody>
</table>

###■やってみたコード
次のjavascriptではうまくいかず、検索しても行ソートというのは見つからず、困ってしまいました。
方法をご存知の方がいらっしゃいましたらどうぞよろしくお願い致します。

$(function(){

//並び替え順を設定
var sortOrder = 1; //1:昇順, -1:降順
//行をクリックしたら
     $('.dothesort').click(function(){

          var type = $(this).data('type');
          var col = $(this).index(); //0, 1 ...

          //行全体を取得
          var $rows = $('tbody > tr');

          //行を並び替え（点数で）
          $rows.sort(function(a,b){
               return compare(a, b, type)*sortOrder;

          var arrow.empty.append($rows);

          var arrow = sortOrder === 1 ? “→":"←";
          $(‘.dothesort > span').text('');
          $(this).find('span').text(arrow)
          //並び替え順を反転
          sortOrder *= -1;
     });

     function  compare(a, b, type, col){
               var  _a = $(a).find('td').eq(col).text() *1;
               var  _b = $(b).find('td')eq(col).text() *1;

               if(type == “string"){
                    if(_a < _b)
                         return -1;
                    } 
                    if(_a > _b){
                         return 1;
                    }
                    return 0;
          } else {
               _a *= 1;
               _b *= 1;
               return _a - _b
              }

     }

});

▼動くサンプル
https://jsfiddle.net/q9n0exx8/

Answer 1

ちょっと雑ですが、こういうことでしょうか？

$(function(){
  $('#t1 tbody tr').each(function(){
    $(this).find('td').eq(0).on('click',function(){
      var t1=parseInt($(this).siblings().eq(0).text());
      var t2=parseInt($(this).siblings().eq(1).text());
      if(t1>t2){
        $(this).closest('table').find('tr').each(function(){
          $(this).find('td,th').eq(1).appendTo($(this));
        });
      }
    });
  });
});

<table id="t1">
     <thead>
          <tr>
               <th data-type="string">名前<span></span></th>
               <th data-type="integer">国語<span></span></th>
               <th data-type="integer">数学<span></span></th>               
          </tr>
     </thead>
     <tbody>
          <tr class="dothesort">
               <td>鈴木</td><td>12</td><td>9</td>
          </tr>
          <tr class="dothesort">
               <td>佐藤</td><td>25</td><td>89</td>
          </tr>
          <tr class="dothesort">
               <td>高橋</td><td>1</td><td>987</td>
          </tr>
          <tr class="dothesort">
               <td>山田</td><td>604</td><td>78</td>
          </tr>
     </tbody>
</table>

ちょっと改良

こちらのほうがちょっとjQueryらしいかもしれませんね

$(function(){
  $('#t1 tbody td').filter(function(){
    return $(this).closest('tr').find('td').index(this)==0;
  }).on('click',function(){
    var t1=parseInt($(this).siblings().eq(0).text());
    var t2=parseInt($(this).siblings().eq(1).text());
    if(t1>t2){
      $(this).closest('table').find('tr').each(function(){
        $(this).find('td,th').eq(1).appendTo($(this));
      });
    }
  });
});

複数列

複数列バージョンです

$(function(){
  $('#t1 tbody td').filter(function(){
    return $(this).closest('tr').find('td').index(this)==0;
  }).on('click',function(){
    var list=$(this).siblings('td').map(function(x){return {idx:x+1,num:parseInt($(this).text())}}).get();
    list.sort(function(x,y){
      if(x["num"]==y["num"]) return 0;
      return x["num"]>y["num"]?1:-1;
    });
    $(this).closest('table').find('tr').each(function(){
      var self=$(this);
      list.forEach(function(x){
        self.find('td,th').eq(x["idx"]).clone().appendTo(self);
      });
      self.find('td,th').filter(':gt(0):lt('+list.length+')').remove();
    });
  });
});

<table id="t1">
<thead>
<tr>
<th data-type="string">名前<span></span></th>
<th data-type="integer">国語<span></span></th>
<th data-type="integer">数学<span></span></th>
<th data-type="integer">保健<span></span></th>
<th data-type="integer">社会<span></span></th>
<th data-type="integer">美術<span></span></th>
<th data-type="integer">英語<span></span></th>
</tr>
</thead>
<tbody>
<tbody>
<tr class="dothesort">
<td>鈴木</td><td>12</td><td>19</td><td>25</td><td>25</td><td>89</td><td>25</td>
</tr>
<tr class="dothesort">
<td>高橋</td><td>25</td><td>89</td><td>25</td><td>25</td><td>89</td><td>25</td></tr>
</tr>
<tr class="dothesort">
<td>佐藤</td><td>60</td><td>987</td><td>89</td><td>25</td><td>89</td><td>25</td>
</tr>
<tr class="dothesort">
<td>山田</td><td>604</td><td>78</td><td>25</td><td>25</td><td>89</td><td>25</td>
</tr>
</tbody>
</table>

sample

• CodePen

Comments

[yambejp]

単に1列目をクリックすると2列目と3列目がいれかわるならもっと簡単。
また2列目と3列目が同値だったときどうするかわからないので
その場合はソートしていません

[退会済みユーザー]

yambejpさん、いつもお世話になってます。

今回もさすがのご回答でスグに解決。。と、思いましたら、いくつかナゾ??の不具合を見つけてしまいました。

こちらの➀➁➂です。
https://jsfiddle.net/otoeaszL/19/

どうやら「ちょっと雑版」も「ちょっと改良版」でも同様のようです。

どうかもう一声、お手すきの折にご修正いただけましたら、たいへん幸甚に存じまするです。。

---

きっと➂については、

「>また2列目と3列目が同値だったときどうするかわからない」

とすでに仰っている部分だと思います。それについては、

「列は４列５列６列と続くので同値でもソートしたいです。」

という感じでございます。

[yambejp]

複数列をソートする想定ではなかったので、改めてロジックを見直して
修正版をあげておきました

[退会済みユーザー]

いつも質問に対して的確かつ必要最小限なコードを書いてくださっているのに、後からあれこれアレンジを要求してしまい、大っ変お手数おかけしてすみません。今回もバッチリでした。いつも、いつも、本っ当～～に！どうもありがとうございます！！