cman.jpWEBページ作成
広告
TABLE一覧のフィルター（抽出）
クライアントのHTMLでExcelの「フィルター」を実現するためには、JavaScriptを使用する必要があります。
下記サンプルはExcelのフィルターと機能は異なりますが、JavaScriptとCSSを利用することで、コーディング量を大幅に削減することができます。また、CSSによりフィルターしているためフィルター速度も高速となります。
サンプルはCSS3の機能を使用しているため古いブラウザ（IE8など）では動作しませんのでご注意ください。
広告
TABLE一覧のフィルター（抽出）JavaScript＋CSSサンプル
セレクトボックス（SELECT）でフィルタする
<!-- 【 CSS 】 ---------------------------------------------- -->
<style type="text/css">
#sampleTable th {border : 1px solid #666;}
#sampleTable td {border : 1px solid #666;}
.allNoDisplay tr:not(.colTitle) {display: none;}
.fruit tr[fruit] {display: table-row;}
.vegetable tr[vegetable] {display: table-row;}
.meat tr[meat] {display: table-row;}
</style>
<!-- 【 JavaScript 】 -------------------------------------- -->
<script type="text/javascript">
function goFilter(){
var wTable = document.getElementById("sampleTable");
var wSelect = document.getElementById("sampleSelect");
var value = wSelect.options[wSelect.selectedIndex ].value;
if(value == 'all'){
// --- 全ての場合はクラスをクリア ---
wTable.className = '';
}else{
// --- タイトル以外のTRを非表示＋指定属性を持つTRのみ表示 ---
wTable.className = 'allNoDisplay ' + value;
}
}
</scriptt>
<!-- 【 HTML 】 ------------------------------------------- -->
<table style="width:300px;" id="sampleTable">
<tr class="colTitle">
<th>No</th>
<th>
<select id="sampleSelect" onChange="goFilter();">
<option value="all">全て</option>
<option value="fruit">くだもの</option>
<option value="vegetable">野菜</option>
<option value="meat">肉</option>
</select>
</th>
<th>金額</th></tr>
<tr fruit><td>1</td><td>りんご</td><td>500円</td></tr>
<tr vegetable><td>2</td><td>レタス</td><td>298円</td></tr>
<tr meat><td>3</td><td>鶏肉</td><td>249円</td></tr>
<tr fruit><td>4</td><td>みかん</td><td>398円</td></tr>
<tr vegetable><td>5</td><td>キャベツ</td><td>198円</td></tr>
<tr meat><td>6</td><td>牛肉</td><td>560円</td></tr>
<tr meat><td>7</td><td>豚肉</td><td>318円</td></tr>
<tr vegetable fruit><td>8</td><td>トマト</td><td>198円</td></tr>
</table>
| No | 金額 | |
|---|---|---|
| 1 | りんご | 500円 |
| 2 | レタス | 298円 |
| 3 | 鶏肉 | 249円 |
| 4 | みかん | 398円 |
| 5 | キャベツ | 198円 |
| 6 | 牛肉 | 560円 |
| 7 | 豚肉 | 318円 |
| 8 | トマト | 198円 |
【ポイント】
「.allNoDisplay tr:not(.colTitle) {display: none;} 」を有効にしTABLE内のTRをすべて非表示にします。
ただし、「colTitle」クラスをもつTRはタイトルのため非表示にしません。
SELECTで選択された値を属性に持つTRは表示に変更する。
（例）「.fruit tr[fruit] {display: table-row;}」はTRに「fruit」の属性がある場合に有効とします
（注意）CSS3の機能を使用しているため古いブラウザ（IE8など）ではフィルタが動作しません。
"tr:not(.colTitle)"や"tr[fruit]"などのCSSセレクタについては以下でご確認ください。
CSS(スタイルシート)のセレクタ指定方法
チェックボックス（CHECKBOX）でフィルタする
<!-- 【 CSS 】 ---------------------------------------------- -->
<style type="text/css">
#sampleTable2 th {border : 1px solid #666;}
#sampleTable2 td {border : 1px solid #666;}
.allNoDisplay2 tr:not(.colTitle) {display: none;}
.fruit2 tr[fruit] {display: table-row;}
.vegetable2 tr[vegetable] {display: table-row;}
.meat2 tr[meat] {display: table-row;}
</style>
<!-- 【 JavaScript 】 -------------------------------------- -->
<script type="text/javascript">
function goFilter2(){
var wTable = document.getElementById("sampleTable2");
var value = '';
// --- 選択されている商品のクラスを割り当てる ---
if(document.getElementById("chkFruit").checked) {value += ' fruit2';}
if(document.getElementById("chkVegetable").checked){value += ' vegetable2';}
if(document.getElementById("chkMeat").checked) {value += ' meat2';}
if(value == ''){
// --- 未選択はクラスをクリア ---
wTable.className = '';
}else{
// --- タイトル以外のTRを非表示＋指定属性を持つTRのみ表示 ---
wTable.className = 'allNoDisplay2 ' + value;
}
}
</scriptt>
<!-- 【 HTML 】 ------------------------------------------- -->
<table style="width:300px;" id="sampleTable">
<tr class="colTitle">
<th colspan="3">
<input type="checkbox" onChange="goFilter2()" id="chkFruit">くだもの
<input type="checkbox" onChange="goFilter2()" id="chkVegetable">野菜
<input type="checkbox" onChange="goFilter2()" id="chkMeat">肉
</th>
</tr>
<tr class="colTitle"><th>No</th><th>商品</th><th>金額</th></tr>
<tr fruit><td>1</td><td>りんご</td><td>500円</td></tr>
<tr vegetable><td>2</td><td>レタス</td><td>298円</td></tr>
<tr meat><td>3</td><td>鶏肉</td><td>249円</td></tr>
<tr fruit><td>4</td><td>みかん</td><td>398円</td></tr>
<tr vegetable><td>5</td><td>キャベツ</td><td>198円</td></tr>
<tr meat><td>6</td><td>牛肉</td><td>560円</td></tr>
<tr meat><td>7</td><td>豚肉</td><td>318円</td></tr>
<tr vegetable fruit><td>8</td><td>トマト</td><td>198円</td></tr>
</table>
| くだもの 野菜 肉 | ||
|---|---|---|
| No | 商品 | 金額 |
| 1 | りんご | 500円 |
| 2 | レタス | 298円 |
| 3 | 鶏肉 | 249円 |
| 4 | みかん | 398円 |
| 5 | キャベツ | 198円 |
| 6 | 牛肉 | 560円 |
| 7 | 豚肉 | 318円 |
| 8 | トマト | 198円 |
【ポイント】
「.allNoDisplay2 tr:not(.colTitle) {display: none;} 」を有効にしTABLE内のTRをすべて非表示にします。
ただし、「colTitle」クラスをもつTRはタイトルのため非表示にしません。
チェックボックスで選択された値を属性に持つTRは表示に変更する。
（例）「.fruit2 tr[fruit] {display: table-row;}」はTRに「fruit」の属性がある場合に有効とします。
（注意）CSS3の機能を使用しているため古いブラウザ（IE8など）ではフィルタが動作しません。
"tr:not(.colTitle)"や"tr[fruit]"などのCSSセレクタについては以下でご確認ください。
CSS(スタイルシート)のセレクタ指定方法
広告