文字の画像(イメージ)化
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佐藤 和子66女41
A004ＸＸ商事法人関東1,156
A005伊藤 博40男関西8
A006鈴木 洋子36女753
A007鈴木 幸子25女東北45
A008田中 博 20男関西87
A008ＹＹ販売法人東海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>ＸＸ商事</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>ＹＹ販売</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
広告

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

広告
ページTOP

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

便利なCSS、JavaScriptの自動生成一覧
ABCD
1234
5678
wxyz

TABLEデザイン
ABCD
1234
5678
wxyz

カーソル色
ABCD
1234
5678
wxyz
TABLE
フィルタ

フィルター
ABCD
1234
5678
wxyz
行列ヘッダ
固定

ヘッダー固定
ABCD
1234
5678
wxyz
TABLE
列ソート

列の並び替え
ABCD
1234
5678
wxyz
TABLE
保存

PCに保存
ABCD
1234
57
xz

セルに斜線
ABCD
1234
5678
wxyz
セル
書き換え

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