トップへ(mam-mam.net/)

コピペで使えるJavascriptとCSSでカラムを昇順降順にソート可能なテーブル

検索:

並び替え可能なテーブル

ヘッダー行のカラムをクリックするとそのカラムを基準にして昇順、降順に並び替えするテーブルです。

名前 年齢 役職 収入
イシイ 37 ディレクター 90.000
ヤマダ 34 担当 90.000
カワサキ 29 プロデューサー 70.000
ニシダ 29 担当 70.000
サトウ 18 ディレクター 50.000
イシカワ 21 担当 53.000

ソースコード

コピペで使用できる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>