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

HTMLのtableをExeclのようにフィルタする

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

CSSやJavaScriptは長くなっていますが、使用しているtableの<th>,<td>に印をつけるだけで、JavaScriptやCSSをそのままコピーして利用することもできます。

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

表(table)のフィルタを実行してみよう!

<th>,<td>に「cmanFilterBtn」を定義するとフィルタボタンが付き、自動でフィルタ対象となります。

番号 氏名 年齢 性別 地域 合計
A001田中 実40東北123
A002鈴木 茂50関東5,487
A003佐藤 和子6641
A004XX商事法人関東1,156
A005伊藤 博40関西8
A006鈴木 洋子36753
A007鈴木 幸子25東北45
A008田中 博 20関西87
A008YY販売法人東海2,694
使用したhtml
<!--  -->
<!-- フィルタ対象のテーブル -->
<!-- <th>,<td>に「cmanFilterBtn」を定義するとフィルタボタンが付きます -->
<!--  -->
<table id="sampleTable">  <!--- テーブルのIDをJavaScriptに定義します --->
  <tr>
    <th>番号</th>
    <th cmanFilterBtn>氏名</th>
    <th cmanFilterBtn>年齢</th>
    <th cmanFilterBtn>性別</th>
    <th cmanFilterBtn>地域</th>
    <th cmanFilterBtn>合計</th>
  </tr>
  <tr><td>A001</td><td>田中 実</td><td>40</td><td>男</td><td>東北</td><td>123</td></tr>
  <tr><td>A002</td><td>鈴木 茂</td><td>50</td><td>男</td><td>関東</td><td>5,487</td></tr>
  <tr><td>A003</td><td>佐藤 和子</td><td>66</td><td>女</td><td></td><td>41</td></tr>
  <tr><td>A004</td><td>XX商事</td><td></td><td>法人</td><td>関東</td><td>1,156</td></tr>
  <tr><td>A005</td><td>伊藤 博</td><td>40</td><td>男</td><td>関西</td><td>8</td></tr>
  <tr><td>A006</td><td>鈴木 洋子</td><td>36</td><td>女</td><td></td><td>753</td></tr>
  <tr><td>A007</td><td>鈴木 幸子</td><td>25</td><td>女</td><td>東北</td><td>45</td></tr>
  <tr><td>A008</td><td>田中 博 </td><td>20</td><td>男</td><td>関西</td><td>87</td></tr>
  <tr><td>A008</td><td>YY販売</td><td></td><td>法人</td><td>東海</td><td>2,694</td></tr>
</table>
生成したCSS
<style type="text/css">
/* === フィルタボタン ============================ */
.tfArea{
  display    : inline-block;
  position   : relative;
}
.tfImg{
  display    : inline-block;
  width      : 8px;
  height     : 8px;
  background : #eee;
  border     : 1px solid #777;
  margin     : 1px 3px;
  padding    : 3px;
  cursor     : pointer;
}
/* === フィルタボタン(カーソルオーバー時)======= */
.tfImg:hover{
  background : #FFD700;
}
/* === フィルタボタン内の画像色(SVG)============ */
.tfImg path{
  fill       : #777;
}
/* === フィルタリスト ============================ */
.tfList{
  display    : inline-block;
  position   : absolute;
  max-width  : 250px;
  min-width  : 140px;
  background : #fff;
  border     : 1px solid #777;
  top        : 15px;
  left       : 0;
  line-height: 1.1;
  font-weight: normal;
}
/* === フィルタリスト内のform ==================== */
.tfList form{
  max-height : 150px;           /* 縦幅 */
  overflow   : scroll;
  overflow   : overflow-y;
  overflow   : auto;
}
/* === フィルタリスト内のチェックボックス ======== */
.tfMeisai{
  text-align : left;
  padding    : 2px;
}
/* === フィルタリスト内の文字位置合わせ ========== */
.tfMeisai label{
  padding    : 0 10px 0 3px;
}
/* === OK/CANCELボタン =========================== */
.tfBtnArea{
  text-align : center;
  font-size  : 8pt;
  padding    : 3px 5px;
}
.tfBtnArea input{
  display    : inline-block;
  margin     : 0 5px;
}
/* === 含むボタンの入力エリア ==================== */
.tfInStr{
  padding    : 5px 3px;
  border-top : 1px solid #999;
  border-bottom: 1px solid #999;
}
.tfInStr input{
  box-sizing : border-box;
  width      : 100%;
  padding    : 1px 3px;
  font-weight: normal;
  font-size  : 95%;
  border     : 1px solid #ccc;
}
/* === フィルタ非表示 ============================ */
#sampleTable tr[cmanFilterNone]{
  display    : none;
}
/* === フィルタ非表示行と次行の間を二重線にする == */
#sampleTable tr[cmanFilterNone] + tr td{
  border-top : 3px double #777;
}
 /* --- (参考)テーブル全体のスタイル指定 ------- */
#sampleTable {
  width          : 100%;
  border-collapse: collapse;         /* 境界線結合 */
  border-spacing : 0;                /* 罫線間余白 */
  font-size      : 9pt;              /* 文字サイズ */
}
 /* --- ヘッダーのスタイル指定 ------------------- */
#sampleTable th {
  text-align    : center;            /* 文字位置   */
  font-weight   : bold;              /* 太文字     */
  padding       : 3px 5px;          /* 余白       */
  border        : 1px #666666 solid; /* 罫線       */
  background    : #99ccff;           /* 背景色     */
  white-space   : nowrap;
}
 /* --- 明細のスタイル指定 ----------------------- */
#sampleTable td {
  text-align    : center;            /* 文字位置   */
  padding       : 3px 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() {
  tFilterInit();
}
function tFilterInit(){
 //===============================================================
 //  テーブルの初期設定
 //===============================================================
 
  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('cmanFilterBtn') !== null){
 
        wAddBtn  = '<div class="tsImgArea">';
        wAddBtn += '<svg class="tfImg" id="ts_A_'+j+'" onclick="tSort(this)"><path d="M4 0 L0 6 L8 6 Z"></path></svg>';
        wAddBtn += '<svg class="tfImg" 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('tfImg');
  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を改造してご利用ください。

ページTOP
広告

生成できるホームページ・パーツ一覧
ご利用時の注意事項・制約事項
よくあるご質問
何で無料なの?
生成コードに利用制限はある?
生成コードに保証はある?
jQueryで生成できない?

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