簡単にコピペで使えるJavaScriptとCSSでカラムを昇順・降順ソートできるテーブル

クリックで並び替え可能！簡単導入のソート機能付きテーブル

このテーブルは、ヘッダー行をクリックするだけでカラムの値を基準に昇順・降順に並び替え可能です。
シンプルなJavaScriptとCSSで構築されており、コピペだけで簡単に導入できます。
軽量で動作もスムーズなので、業務ツールやデータ一覧の表示に最適です。

ソースコード

コピペで使用できるCSS+Javascript+HTMLです。

<style>
table.sortableTable{
  border-collapse:collapse;
  padding:0;
}
table.sortableTable>thead>tr>th{
  cursor:pointer;
  border-top:2px solid #EED;
  border-bottom:3px solid #CCB;
  border-right:1px solid #AA9;
  border-left:1px solid #FFF;
  background-color: #EED;
  margin:0;
  padding:0.1em 1.2em 0.1em 0.1em;
  position:relative;
}

table.sortableTable>thead>tr>th::after{
  position:absolute;
  right:0;
  top:0;
  bottom:0;
  content:"";
}
table.sortableTable>thead>tr>th.up::after{
  position:absolute;
  right:0;
  top:0;
  bottom:0;
  content:"▼";
}
table.sortableTable>thead>tr>th.down::after{
  position:absolute;
  right:0;
  top:0;
  bottom:0;
  content:"▲";
}
table.sortableTable>thead>tr>th:hover{
  border-top:2px solid #FFC83C;
}
table.sortableTable>tbody{
  background-color:#FFF;
}
table.sortableTable>tbody>tr>td{
  margin:0px;
  padding:2px;
  border:1px solid #EEE;/* 各行のボトムのボーダー */
}
</style>
<script>
  class TMamSortableTable{
    //コンストラクタ
    constructor(){
      this.elms=[];
      let el=document.querySelectorAll(".sortableTable");
      let ct=0;
      for(let i=0;i<el.length;i++){
        if(el[i].tHead){
          this.elms[ct]=[];
          this.elms[ct].elm=el[i];
          this.elms[ct].col=-1;
          this.elms[ct].sort=0;
          this.elms[ct].rows=[];
          for(let j=0;j<this.elms[ct].elm.tHead.children[0].children.length;j++){
            this.elms[ct].elm.tHead.children[0].children[j].addEventListener(
              "click", this.sortTable.bind(this,ct,j)
            );
          }
          for(let j=0;j<this.elms[ct].elm.tBodies[0].children.length;j++){
            this.elms[ct].rows[j]=this.elms[ct].elm.tBodies[0].children[j];
          }
          ct++;
        }
      }
    }
    //テーブルをソートして行を入れる
    sortTable(tnum,colnum){
      this.remove_rows(tnum);
      let arr=[];
      let clr=this.elms[tnum].rows;
      for(let i=0;i<clr.length;i++){
        arr.push({"idx":i,val:clr[i].children[colnum].innerText});
      }
      if(this.elms[tnum].col!==colnum){
        this.elms[tnum].col=colnum;
        this.elms[tnum].sort=1;
      }else{
        this.elms[tnum].sort=-this.elms[tnum].sort;
      }
      if(this.elms[tnum].sort===1){
        arr.sort(function(a,b){
            if(a.val>b.val){ return 1; }else if(a.val<b.val){ return -1; }else{ return 0; }
        });
      }else{
        arr.sort(function(a,b){
            if(a.val>b.val){ return -1; }else if(a.val<b.val){ return 1; }else{ return 0; }
        });
      }
      for(let i=0;i<arr.length;i++){
        this.elms[tnum].elm.tBodies[0].appendChild(this.elms[tnum].rows[arr[i].idx]);
      }
      let hd=this.elms[tnum].elm.tHead.children[0];
      for(let i=0;i<hd.children.length;i++){
        hd.children[i].classList.remove("down");
        hd.children[i].classList.remove("up");
      }
      if(this.elms[tnum].sort===1){
        hd.children[colnum].classList.add("up");
      }else{
        hd.children[colnum].classList.add("down");
      }
    }
    //全ての行を削除する
    remove_rows(tnum){
      while(this.elms[tnum].elm.tBodies[0].firstElementChild){
        this.elms[tnum].elm.tBodies[0].removeChild(this.elms[tnum].elm.tBodies[0].firstElementChild);
      }
    }
  }
  let MamSortableTable;
  window.addEventListener("DOMContentLoaded",function(){
    MamSortableTable=new TMamSortableTable;
  });
</script>


<table class="sortableTable">
  <thead>
    <tr>
      <th>名前</th>
      <th>年齢</th>
      <th>役職</th>
      <th>収入</th>
    </tr>
  </thead>
  <tbody class="scrollingContent">
    <tr>
      <td>イシイ</td>
      <td>37</td>
      <td>ディレクター</td>
      <td>90.000</td>
    </tr>
    <tr>
      <td>ヤマダ</td>
      <td>34</td>
      <td>担当</td>
      <td>90.000</td>
    </tr>
    <tr>
      <td>カワサキ</td>
      <td>29</td>
      <td>プロデューサー</td>
      <td>70.000</td>
    </tr>
    <tr>
      <td>ニシダ</td>
      <td>29</td>
      <td>担当</td>
      <td>70.000</td>
    </tr>
    <tr>
      <td>サトウ</td>
      <td>18</td>
      <td>ディレクター</td>
      <td>50.000</td>
    </tr>
    <tr>
      <td>イシカワ</td>
      <td>21</td>
      <td>担当</td>
      <td>53.000</td>
    </tr>
  </tbody>
</table>