並び替え可能なテーブル
ヘッダー行のカラムをクリックするとそのカラムを基準にして昇順、降順に並び替えするテーブルです。
名前 | 年齢 | 役職 | 収入 |
---|---|---|---|
イシイ | 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>