はじめに
今回は、テーブルの見栄えを良くしたり、様々な機能を簡単に追加したりできるjQueryプラグインを解説します（表1）。
| 名前 | 概要 |
| jquery.columnfilters | 表に検索用フォームを設けて、フォームに文字や数字を入れると特定の行のみ表示できる |
| jquery.csv2table.js | csvファイルを読み込みHTMLのテーブルに変換でき、ソートや着色などができる |
| tableHover | 表にカーソルを重ねたりクリックしたりした際、行や列の色を変えられる |
対象読者
- jQueryプラグインに興味があり、使ってみたい方
必要な環境と準備
執筆時点のjQueryの最新版は、1.7.2です。第1回を参考に、ダウンロードしてください。また、jQueryプラグインの基本的な使い方は、第3回を参照してください。
サンプルでは、htmlファイルと同じ階層に「plugins」というフォルダを作成し、使用するプラグイン関連のファイルはここにまとめて配置し、説明を進めます。また、scriptsフォルダにはjQuery本体を配置しておきます。なお、今回紹介する「jquery.csv2table.js」プラグインは「img」フォルダ内のgifファイルや「data」フォルダ内のcsvファイルを読み込む設定のため、「img」フォルダを設けてそこにgifファイルを、「data」フォルダを設けてそこにcsvファイルを配置してあります。
フィルタ機能付きテーブルを作成する - jquery.columnfiltersプラグイン
jquery.columnfiltersプラグインは、表に検索用のフォームを設けて、フォームに文字や数字を入れると、その文字／数字から始まる特定の列のみを表示できるプラグインです。表にフォームが表示されている状態を図1に示します。
jquery.columnfiltersプラグインを使ったサンプルの実行例
続いてフォームに文字を入れて、その文字から始まる行のみを表示した状態を図2に示します。Aの項目でSから始まる言葉がある行のみが表示されていることが分かります。
また、検索の際には「*」をワイルドカードとして機能させることができます。Dの項目で0を含む数字がある行のみを表示した状態を図3に示します。
jquery.columnfiltersプラグインの使い方
使用方法は、jquery.columnfiltersプラグインのサイト上の「Download the source」から「columnfilters.zip」というファイルをダウンロードして保存し、解凍後、ソースデータ「jquery.columnfilters.js」を「plugins」フォルダ下に配置します。
リスト1にjquery.columnfiltersプラグインの使用例を示します。
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8" />
<title>jQueryプラグイン（jquery.columnfilters.js) サンプル</title>
<!--1.jQueryの読み込み-->
<script type="text/javascript" src="./Scripts/jquery-1.7.2.min.js"></script>
<!--2.プラグインの読み込み-->
<script type="text/javascript" src="./plugins/jquery.columnfilters.js" charset="utf-8"></script>
<!--3.プラグインの設定-->
<script type="text/javascript">
$(document).ready(function(){
$('table#book1').columnFilters({alternateRowClassNames:['rowa','rowb']
});
});
</script>
<!--4.CSSの設定-->
<style type="text/css">
thead{background-color: #bbb;}
table{background-color: #DCDCDC;}
td{text-align:center;}
table tr.rowb{background-color:#EAf2FD;}
table tr.filterColumns td{padding:2px;}
body{padding-bottom:150px;}
</style>
</head>
<body>
<h1>jQueryプラグイン（jquery.columnfilters.js) サンプル</h1>
<!--5.テーブルの設定-->
<table id="book1">
<thead>
<tr><th>No.</th><th>A</th><th>B</th><th>C</th>
</thead>
<tbody>
<tr><td>1</td><td>Yamada</td><td>abc</td><td>012</td>
<tr><td>2</td><td>Suzuki</td><td>cba</td><td>345</td>
<tr><td>3</td><td>Tanaka</td><td>xyz</td><td>678</td>
<tr><td>4</td><td>Sasaki</td><td>zyx</td><td>901</td>
</tbody>
</table>
</body>
</html>
「3.プラグインの設定」では、「$(document).ready(function(){});」の中でjQueryメソッドとしてjquery.columnfiltersプラグインを機能させます。セレクター部分に「table#id名」といった形でテーブルのid名（このスクリプトではbook1）を設定することが重要です。そして、メソッド部分に「columnFilters」を設定しています。
このスクリプトでは行ごとを違う色に見せるため、「.columnFilters();」の括弧内に「{alternateRowClassNames:['rowa','rowb']}」と記述し、奇数行を「rowa」、偶数行を「rowb」と設定し、この後の「4.cssの設定」で「rowb」の色を別に設定しています。設定オプションの一つである「alternateRowClassNames」については後述します。
あとは、このプラグインを機能させたい表に「3.プラグインの設定」で設定したid名を付与するだけで、検索窓付きの表が完成します。
オプションによる様々な検索
検索オプションとしては以下のものがあります。
| 検索窓に入れる記号 | 名前 | 概要 |
| * | wildcard | *の後に入力した文字を含む行のみを表示（通常の場合文字を入力すると、その文字から始まる行のみを表示） |
| ! | notcharacter | !の後に入力した文字から始まらない行のみを表示 |
これらの検索オプションは「.columnFilter();」の括弧内で
$(document).ready(function() {
$('table#id名').columnFilters({wildCard:'#',notCharacter:'?'});
});
と設定すると、wildcardとして使用する文字を*から#に、notcharacterで使用する文字を!から?に、といった形で変更できます。
多彩な設定オプション
また、様々な設定オプションも用意されています。
| オプション名 | 既定値 | 概要 |
| caseSensitive | false | 大文字・小文字を区別するか |
| minSearchCharacters | 1 | 何文字入力されたら検索を実施するか |
| excludeColumns | [] | 検索窓を設けない列（列番号を配列で指定） |
| alternateRowClassNames | [] | 交互の行にスタイルクラスを割り当てる（任意のスタイルクラスを設定可能） |
これらも例えばcaseSensitiveをtrueにして大文字・小文字まで正確に入力を促す場合は「.columnFilters();」の括弧内で変更可能であり、以下のように変更します。
$(document).ready(function() {
$('table#id名').columnFilters({ caseSensitive:true });
});
