テーブルタグでExcelのオートフィルタを実現

最近また腰痛気味なYu-ichiです:neko:

体が硬いことが腰痛の原因らしいです:naku:

さて、今回はHTMLのtableタグに関する便利なスクリプトをご紹介します。
Excelみたいにオートフィルタができちゃいます!:kaomoji7:

まずはスクリプトをダウンロードしてください。:kaomoji6:
http://www.javascripttoolbox.com/lib/table/index.php
※英語注意w:kaomoji3:

ダウンロードした「table.js」ファイルをアップロードして、 ページ内で呼び出してきます。

<script src="table.js" type="text/javascript"></script>

次に、テーブルタグにクラスを付けます。

<table class="table-autofilter">

続いて、<th>タグにもクラスを付けます。
ここでクラスを付けた項目がフィルタの対象になります。

<th class="table-filterable">

ここで1つ注意点が!
どうも項目名を<thead>、要素を<tbody>で囲まないと動かないようです。

<table class="table-autofilter">
<thead>
<tr><th class="table-filterable">項目A</th></tr>
<tr><th class="table-filterable">項目B</th></tr>
</thead>
<tbody>
<tr><td>あああ</td><td>いいい</td></tr>
<tr><td>ううう</td><td>えええ</td></tr>
</tbody>
</table>

こんな感じで、囲ってあげると↓のような感じで動きます。

【サンプル】

名前出身地年齢
佐藤埼玉20
鈴木千葉25
山田東京30
加藤埼玉22

問題点としては、1つフィルタを設定してさらにもう1つフィルタをかけようとすると
必要のない項目まで選べてしまう点ですかね・・・。

それでも設置が簡単で使いやすいのでぜひお試しください:neko:

トラックバックURL