jQuery の tableHover プラグインの導入方法やオプションなどについて。
tableHover プラグインは、表(テーブル)を、ホバー(カーソルを合わせる)やクリックなどの、マウス操作でハイライト表示させたいときに便利なプラグイン。特にデータの多い表は、ハイライト表示でとてもわかりやすくなる。
導入
don’t look » tableHoverより、「 jquery.tablehover.zip 」をダウンロード。
実装例(サンプル)
A | B | C | D | E |
A | B | C | D | E |
X | X | X | X | X |
X | X | X | X | X |
X | X | X | X | X |
X | X | X | X | X |
X | X | X | X | X |
実装例(サンプル)について
実装例(サンプル)のソースコードについては、こちら。
オプション
よく使うオプション。
- rowClass
セルにカーソルを合わせると、そのセルが属する行に、指定したクラス名を追加するオプション。
- colClass
セルにカーソルを合わせると、そのセルが属する列に、指定したクラス名を追加するオプション。
- cellClass
セルにカーソルを合わせると、そのセルに、指定したクラス名を追加するオプション。
- clickClass
セルをクリックすると、そのセルと、そのセルが属する行と列に、指定したクラス名を追加するオプション。