HTMLのテーブルにExcelのようなフィルター機能を付けようと思い、jQueryのプラグインを探したところ、見付からなかったので、自分で作ってみました。
サンプル
プラグイン
ダウンロードしてください。
jquery.tablefilter
使用例
<body>
<table id="mytable" border="1">
<tr><th>番号</th><th>名前</th><th>値</th><th>区分</th><th>所在地</th></tr>
<tr><td>1</td><td>甲</td><td>100</td><td>A</td><td>埼玉県</td></tr>
<tr><td>2</td><td>乙</td><td>200</td><td>B</td><td>千葉県</td></tr>
<tr><td>3</td><td>丙</td><td>300</td><td>C</td><td>東京都</td></tr>
<tr><td>4</td><td>丁</td><td>100</td><td>D</td><td>神奈川県</td></tr>
<tr><td>5</td><td>戊</td><td>200</td><td>E</td><td>埼玉県</td></tr>
</table>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.tablefilter.js"></script>
<script type="text/javascript">
<!--
$(function () {
$("table").tablefilter();
});
// --></script>
</body>
<table id="mytable" border="1">
<tr><th>番号</th><th>名前</th><th>値</th><th>区分</th><th>所在地</th></tr>
<tr><td>1</td><td>甲</td><td>100</td><td>A</td><td>埼玉県</td></tr>
<tr><td>2</td><td>乙</td><td>200</td><td>B</td><td>千葉県</td></tr>
<tr><td>3</td><td>丙</td><td>300</td><td>C</td><td>東京都</td></tr>
<tr><td>4</td><td>丁</td><td>100</td><td>D</td><td>神奈川県</td></tr>
<tr><td>5</td><td>戊</td><td>200</td><td>E</td><td>埼玉県</td></tr>
</table>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.tablefilter.js"></script>
<script type="text/javascript">
<!--
$(function () {
$("table").tablefilter();
});
// --></script>
</body>
jQueryの本体と「jquery.min.js」と上でダウンロードした「jquery.tablefilter.js」を適当なフォルダに保存します。それに応じて「src=」の部分を書き換えてください。
「$(“table”).tablefilter();」と書くとそのページ内のすべてのテーブルにフィルターボタンが設置されます。
特定のテーブルだけに適用するときは、テーブルにidを設定し「$(“#mytable”).tablefilter();」のようにします。
コメント