文字の画像(イメージ)化
cman.jp cman.jp > パーツ作成メニュー > 表のデザイン > tableソート

HTMLのtableをExeclのようにソートする

htmlで表を作成する場合はテーブルタグ「table」を使用しますが、tableにはExcelのようなソート・並び順を変更する機能がありません。
当ページでは、tableを表示したままで表内をソートするJavaScriptのサンプルを掲載しています。

数字や文字を自動で認識して昇順または降順でソートする機能も付いています。また、英字は大文字と小文字の区別についても設定可能としています。

セルを結合している場合はJavaScriptを改造してご利用ください。

表(table)の並び順を変更して見よう!

<th>,<td>に「cmanSortBtn」を定義するとソートボタンが付き、自動でソート対象となります。

ソート基準
見出し 列1 列2 列3 列4 列5
行141DEFGHあいう100
行23100abcかきく10,000
行3520ijklさしす1,000
行419MNOPたちつ10
行5280qrなにぬ100,000
使用したhtml
<!--  -->
<!-- 『ソート対象のテーブル』 -->
<!-- <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>
生成したCSS
<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>
生成したJavaScript
<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>
ページTOP
広告
広告
ページTOP

注意事項

表示する表「tabale」のセルが結合している場合、正常に動作しません。JavaScriptを改造してご利用ください。

「数値として見える」は、値が数値、カンマ、ドット、マイナスのみで構成される場合としています。基準が違う場合はJavaScriptを改造してご利用ください。

ページTOP
広告

生成できるホームページ・パーツ一覧
文字のデザイン・動作の生成文字のデザイン
画像のデザイン・動作の生成画像のデザイン
ボタンのデザイン・動作の生成ボタンのデザイン
入力項目のデザイン・動作の生成入力項目のデザイン
表のデザイン・動作の生成テーブルのデザイン
BOXのデザイン・動作の生成BOXのデザイン
吹き出しのデザイン・動作の生成吹き出しのデザイン
HTMLページのデザイン・動作の生成ページのデザイン
図形のデザイン・動作の生成図形のデザイン
ご利用時の注意事項・制約事項
よくあるご質問
何で無料なの?
生成コードに利用制限はある?
生成コードに保証はある?
jQueryで生成できない?

広告
ページTOP

当サイト内の関連するページ

広告
QrCode
このページのURL
スマートフォン・タブレット
運営:株式会社シーマン