jquery/javascriptですぐに使える簡単テーブルソート

HTMLでテーブルをソートするためのスクリプト作りました。普通のjqueryのライブラリだけでいけます。

テーブルソートは以下のようなテーブルソート用のプラグインがたくさん出てるいるのですが、

いろいろと以下のような問題があって使い辛いので自作しました。

おしゃれすぎるデザインが変更し辛い
仕組みがよくわからんので、改修し辛い
プラグインで使用するクラス名が既に使用されてたりする
プラグインを適用するオプジェクトをid指定する形のものは、複数テーブル対応できないので使い辛い

機能

部分をクリックすると昇順ソート、もう一回クリックすると降順ソート。
複数テーブルに対応。クラスとthisでコントロールしてるので他のテーブルへは影響ありません。
数字＆文字列ソート

使い方

ソートさせたいテーブルにクラスsort-tabを付ける。

デモ

#ソートしたいテーブルのヘッダーをクリックするとソートされます

A	A	B	C
31	1	2	3
1	1	2	3
4	5	1	6
6	7	1	1

no	姓	名
1	鈴木	イチロウ
2	鈴木	ジロウ
3	山田	ジロウ

ソース

<style>
.ascend{
background-image:url("https://s3-ap-northeast-1.amazonaws.com/hatena-ongaeshi/sort-table/img/asc.png");
background-repeat:no-repeat;
background-position: 5px center;
}
.descend{
background-image:url("https://s3-ap-northeast-1.amazonaws.com/hatena-ongaeshi/sort-table/img/dsc.png");
background-repeat:no-repeat;
background-position: 5px center;
}
.sort-tab{
border-collapse: collapse;
border-spacing: 0;
}
.sort-tab th{
background-color:#dcdcdc;
cursor:pointer;
}
.sort-tab th,
.sort-tab td{
padding:5px 20px 5px 20px;
border:1px solid #696969;
}
</style>
  <table class="sort-tab">
    <thead>
      <tr>
       <th>A</th>
       <th>A</th>
       <th>B</th>
       <th>C</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>31</td>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td>1</td>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td>4</td>
        <td>5</td>
        <td>1</td>
        <td>6</td>
      </tr>
      <tr>
        <td>6</td>
        <td>7</td>
        <td>1</td>
        <td>1</td>
      </tr>
    </tbody>
  </table>

  <table class="sort-tab">
    <thead>
      <tr>
        <th>no</th>
        <th>姓</th>
        <th>名</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>鈴木</td>
        <td>イチロウ</td>
      </tr>
      <tr>
        <td>2</td>
        <td>鈴木</td>
        <td>ジロウ</td>
      </tr>
      <tr>
        <td>3</td>
        <td>山田</td>
        <td>ジロウ</td>
      </tr>
    </tbody>
  </table>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
  $(".sort-tab th").click(function(){
    // culumn no you select
    key = $(this).index();
    // toggle ascend or descend
    if($(this).hasClass("descend")){
      var change_to = "ascend";
    }else{
      var change_to = "descend";  
    }
    // initialize class
    $(this).closest("table").find("th").removeClass("ascend");
    $(this).closest("table").find("th").removeClass("descend");
    $(this).addClass(change_to);  
    // get number of line and columns of the table
    var no_row = $(this).closest("table").children().children().length;
    var no_column = $(this).closest("table").children().children().eq(0).children().length;
    // get all entries and keep values in array
    var arr = [];
    
    // flag for value type "strings" or "number only"
    var flag = 0;  // 0:number only  1:strings
    var re = /\D/;

    for(var i=1; i < no_row; i++){
      arr[i-1]=[];
      for(var j=0; j < no_column; j++){
        if(j==key && re.test($(this).closest("table").children().children().eq(i).children().eq(j).text())){
          flag=1;
        }
        arr[i-1][j] = $(this).closest("table").children().children().eq(i).children().eq(j).text();
      }
    }

    // sort by the key you selected
    var rs = arr.sort(
                      function(a,b){ 
                        //case : value type is number only
                        if(flag==0){
                          if(change_to == "ascend"){
                            return(a[key] - b[key]);
                          }else{
                            return(b[key] - a[key]);
                          }                          
                        //case : value contains strings
                        }else{
                          if(change_to == "ascend"){
                            if(a[key] > b[key]){
                              return 1;
                            }else{
                              return -1;
                            }
                          }else{
                            if(b[key] > a[key]){
                              return 1;
                            }else{
                              return -1;
                            }
                          }                          
                        }
                      }
    )

    // insert arranged values into table
    for(var i=0;i < rs.length; i++){
      for(var j=0;j < rs[i].length; j++){
        $(this).closest("table").children().children().eq(i+1).children().eq(j).text(rs[i][j]);
      }
    }
  });
});
</script>