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

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

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

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

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

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

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

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

<table class="table-autofilter">

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

<th class="table-filterable">

ここで１つ注意点が！
どうも項目名を<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>

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

【サンプル】

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

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