htmlで表を作成する場合はテーブルタグ「table」を使用しますが、tableにはExcelのようなソート・並び順を変更する機能がありません。
当ページでは、tableを表示したままで表内をソートするJavaScriptのサンプルを掲載しています。
数字や文字を自動で認識して昇順または降順でソートする機能も付いています。また、英字は大文字と小文字の区別についても設定可能としています。
セルを結合している場合はJavaScriptを改造してご利用ください。
<th>,<td>に「cmanSortBtn」を定義するとソートボタンが付き、自動でソート対象となります。
見出し | 列1 | 列2 | 列3 | 列4 | 列5 |
---|---|---|---|---|---|
行1 | 4 | 1 | DEFGH | あいう | 100 |
行2 | 3 | 100 | abc | かきく | 10,000 |
行3 | 5 | 20 | ijkl | さしす | 1,000 |
行4 | 1 | 9 | MNOP | たちつ | 10 |
行5 | 2 | 80 | qr | なにぬ | 100,000 |
<!-- --> <!-- 『ソート対象のテーブル』 --> <!-- <th>,<td>に「cmanSortBtn」を定義するとソートボタンが付きます --> <!-- --> <table id="sampleTable"> <!-- テーブルのIDをJavaScriptに定義します --> <tr> <th>見出し</th> <th cmanSortBtn>列1</th> <th cmanSortBtn>列2</th> <th cmanSortBtn>列3</th> <th cmanSortBtn>列4</th> <th cmanSortBtn>列5</th> </tr> <tr><th>行1</th><td>4</td><td>1</td><td>DEFGH</td><td>あいう</td><td>100</td></tr> <tr><th>行2</th><td>3</td><td>100</td><td>abc</td><td>かきく</td><td>10,000</td></tr> <tr><th>行3</th><td>5</td><td>20</td><td>ijkl</td><td>さしす</td><td>1,000</td></tr> <tr><th>行4</th><td>1</td><td>9</td><td>MNOP</td><td>たちつ</td><td>10</td></tr> <tr><th>行5</th><td>2</td><td>80</td><td>qr</td><td>なにぬ</td><td>100,000</td></tr> </table>
<style type="text/css"> /* === ソートボタンを表示するエリア ============== */ .tsImgArea{ line-height: 1; } /* === ソートボタン ============================== */ .tsImg{ display : inline-block; width : 8px; height : 6px; background : #eee; border : 1px solid #777; margin : 1px 3px; padding : 3px; cursor : pointer; } /* === ソートボタン(カーソルオーバー時)========= */ .tsImg:hover{ background : #FFD700; } /* === ソートボタン内の三角の色(SVG)============ */ .tsImg path{ fill : #777; } /* --- (参考)テーブル全体のスタイル指定 ------- */ #sampleTable { width : 100%; border-collapse: collapse; /* 境界線結合 */ border-spacing : 0; /* 罫線間余白 */ font-size : 9pt; /* 文字サイズ */ } /* --- ヘッダーのスタイル指定 ------------------- */ #sampleTable th { text-align : center; /* 文字位置 */ font-weight : bold; /* 太文字 */ padding : 6px 5px; /* 余白 */ border : 1px #666666 solid; /* 罫線 */ background : #99ccff; /* 背景色 */ white-space : nowrap; } /* --- 明細のスタイル指定 ----------------------- */ #sampleTable td { text-align : center; /* 文字位置 */ padding : 6px 5px; /* 余白 */ border : 1px #666666 solid; /* 罫線 */ white-space : nowrap; } </style>
<script type="text/javascript"> //=============================================================== // テーブルソートの共通変数 設定要! //=============================================================== var gTabldID = 'sampleTable'; // テーブルのエリアのIDを設定 var gSortNum = 1; // 1 : 数値に見える列は数値でソート var gSortAa = 1; // 1 : 英大文字と小文字を区別しない var gSortBtnRow = 0; //=============================================================== // オンロードでテーブル初期設定関数をCALL //=============================================================== window.onload = function() { tSortInit(); } function tSortInit(){ //=============================================================== // テーブルの初期設定 //=============================================================== var wTABLE = document.getElementById(gTabldID); var wTR = wTABLE.rows; var wAddBtn = ''; // --- テーブル内を検索してソートボタンを付ける ---------------- for(var i=0; i < wTR.length; i++){ var wTD = wTABLE.rows[i].cells; for(var j=0; j < wTD.length; j++){ if(wTD[j].getAttribute('cmanSortBtn') !== null){ wAddBtn = '<div class="tsImgArea">'; wAddBtn += '<svg class="tsImg" id="ts_A_'+j+'" onclick="tSort(this)"><path d="M4 0 L0 6 L8 6 Z"></path></svg>'; wAddBtn += '<svg class="tsImg" id="ts_D_'+j+'" onclick="tSort(this)"><path d="M0 0 L8 0 L4 7 Z"></path></svg>'; wAddBtn += '</div>'; wTD[j].innerHTML = wTD[j].innerHTML+wAddBtn; } } // --- ボタンを付けたら以降の行は無視する -------------------- if(wAddBtn != ''){ gSortBtnRow = i; break; } } } function tSort(argObj){ //=============================================================== // ソート実行 //=============================================================== // 「ts_A_1」形式 [1]:A-昇順,D-降順 [2]:列番号 var wSortKey = argObj.id.split('_'); var wTABLE = document.getElementById(gTabldID); var wTR = wTABLE.rows; var wItem = []; // クリックされた列の値 var wItemSort = []; // クリックされた列の値(項目ソート後) var wMoveRow = []; // 元の行位置(行削除考慮位置) var wNotNum = 0; // 1 : 数字でない var wStartRow = gSortBtnRow + 1; // ソートを開始する行はボタンの次の行 // ------------------------------------------------------ // クリックされた列の値を取得する // ------------------------------------------------------ for(var i=wStartRow; i < wTR.length; i++){ var j = i - wStartRow; wItem[j] = wTR[i].cells[wSortKey[2]].innerText.toString(); if(wItem[j].match(/^[-]?[0-9,\.]+$/)){ }else{ wNotNum = 1; } } // ソート用に配列をコピー wItemSort = wItem.slice(0, wItem.length); // ------------------------------------------------------ // 列の値でソートを実行 // ------------------------------------------------------ if(wSortKey[1] == 'A'){ if((gSortNum == 1)&&(wNotNum == 0)){ wItemSort.sort(sortNumA); // 数値で昇順 }else{ wItemSort.sort(sortStrA); // 文字で昇順 } }else{ if((gSortNum == 1)&&(wNotNum == 0)){ wItemSort.sort(sortNumD); // 数値で降順 }else{ wItemSort.sort(sortStrD); // 文字で降順 } } // ------------------------------------------------------ // 行の入れ替え順を取得 // ソート前後の列の値を比較して行の移動順を確定 // 配列を削除して前詰めしている(移動時も同じ動き) // ------------------------------------------------------ for(var i=0; i < wItemSort.length; i++){ for(var j=0; j < wItem.length; j++){ if(wItemSort[i] == wItem[j]){ wMoveRow[i] = j + wStartRow; wItem.splice(j, 1); break; } } } // ------------------------------------------------------ // ソート順に行を移動 // ------------------------------------------------------ for(var i=0; i < wMoveRow.length; i++){ var wMoveTr = wTABLE.rows[wMoveRow[i]]; // 移動対象 var wLastTr = wTABLE.rows[wTABLE.rows.length - 1]; // 最終行 // 最終行にコピーしてから移動元を削除 wLastTr.parentNode.insertBefore(wMoveTr.cloneNode(true), wLastTr.nextSibling); wTABLE.deleteRow(wMoveRow[i]); } // ------------------------------------------------------ // クリックされたソートボタンの色付け // ------------------------------------------------------ var elmImg = document.getElementsByClassName('tsImg'); for (var i=0; i < elmImg.length; i++) { if(elmImg[i].id == argObj.id){ elmImg[i].style.backgroundColor = '#ffff00'; }else{ elmImg[i].style.backgroundColor = ''; } } } function sortNumA(a, b) { //=============================================================== // 数字のソート関数(昇順) //=============================================================== a = parseInt(a.replace(/,/g, '')); b = parseInt(b.replace(/,/g, '')); return a - b; } function sortNumD(a, b) { //=============================================================== // 数字のソート関数(降順) //=============================================================== a = parseInt(a.replace(/,/g, '')); b = parseInt(b.replace(/,/g, '')); return b - a; } function sortStrA(a, b){ //=============================================================== // 文字のソート関数(昇順) //=============================================================== a = a.toString(); b = b.toString(); if(gSortAa == 1){ // 1 : 英大文字小文字を区別しない a = a.toLowerCase(); b = b.toLowerCase(); } if (a < b){ return -1; } else if(a > b){ return 1; } return 0; } function sortStrD(a, b){ //=============================================================== // 文字のソート関数(降順) //=============================================================== a = a.toString(); b = b.toString(); if(gSortAa == 1){ // 1 : 英大文字小文字を区別しない a = a.toLowerCase(); b = b.toLowerCase(); } if (b < a){ return -1; } else if(b > a){ return 1; } return 0; } </script>
表示する表「tabale」のセルが結合している場合、正常に動作しません。JavaScriptを改造してご利用ください。
「数値として見える」は、値が数値、カンマ、ドット、マイナスのみで構成される場合としています。基準が違う場合はJavaScriptを改造してご利用ください。
生成できるホームページ・パーツ一覧 | |
文字のデザイン | |
画像のデザイン | |
ボタンのデザイン | |
入力項目のデザイン | |
テーブルのデザイン | |
BOXのデザイン | |
吹き出しのデザイン | |
ページのデザイン | |
図形のデザイン | |
ご利用時の注意事項・制約事項 | |
よくあるご質問 | |
何で無料なの? | |
生成コードに利用制限はある? | |
生成コードに保証はある? | |
jQueryで生成できない? |
スマートフォン・タブレット | 運営:株式会社シーマン |