CodeZine(コードジン)

特集ページ一覧

テーブルを操作するjQueryプラグイン

「jQuery プラグイン」の利用(10)

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2012/07/03 14:00
目次

カーソルを合わせると行・列を色付き表示できる - tableHoverプラグイン

 tableHoverプラグインは指定したテーブルにカーソルを合わせると、カーソル上のセルがある行と列を色付きで表示でき、どこの行・列にあるかが分かりやすくなるプラグインです。

tableHoverプラグインを使ったサンプルの実行例

 tableHoverプラグイン適用後を図7・図8に示します。図7はカーソルをNo.3の行、Bの列に合わせて行・列が青く表示されたところです。

図7 tableHoverプラグイン適用後(マウスオーバー時)
図7 tableHoverプラグイン適用後(マウスオーバー時)

 図8はNo.2の行、Aの列にカーソルを合わせてクリックしたところです。クリックしたセルの行・列が赤く表示されています。

図8 tableHoverプラグイン適用後(クリック時)
図8 tableHoverプラグイン適用後(クリック時)

tableHoverプラグインの使い方

 使用方法はtableHoverのサイト上から「jquery.tablehover.zip」をダウンロードし、解凍後「jquery.tablehover.js」をpluginsフォルダ下に配置します。

 リスト4にtableHoverプラグインの使用例を示します。

リスト4 tableHoverプラグインの使用例(jQueryPlugin_tableHover.html)
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8" />
<title>jQueryプラグイン(tableHover) サンプル</title>

<!--1.jQueryの読み込み-->
<script type="text/javascript" src="./scripts/jquery-1.7.2.min.js"></script>

<!--2.プラグインの読み込み-->
<script type="text/javascript" src="./plugins/jquery.tablehover.js"></script>

<!--3.プラグインの設定-->
<script type="text/javascript">
$(document).ready(function(){  
    $('#book1').tableHover({  
        colClass: 'hover',   
        cellClass: 'hovercell',  
        clickClass: 'click'   
    });   
});  
</script>

<!--4.CSSの設定-->
<style type="text/css">
table{background-color: #DCDCDC;}
thead{background-color: #bbb;}
td{background:#FFF;text-align:center;}
td.hover, tr.hover{background-color: blue;}
td.click, th.click{background-color: red;}
</style>

</head>
<body>
<h1>jQueryプラグイン(tableHover) サンプル</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>aaa</td><td>111</td><td>012</td>
       <tr><td>2</td><td>bbb</td><td>222</td><td>345</td>
       <tr><td>3</td><td>ccc</td><td>333</td><td>678</td>
       <tr><td>4</td><td>ddd</td><td>444</td><td>901</td>
    </tbody>
</table>

</body>
</html>

 「3.プラグインの設定」のように「$(document).ready(function(){});」の中でjQueryメソッドとしてtableHoverプラグインを機能させます。セレクター部分に表のidを定義します。そして「tableHover();」の括弧内でカーソルを動かしている時の行・列用のクラスとして「hover」、カーソルを動かしている時のセル用のクラスとして「hoverclass」、クリックしたセルと行・列用のクラスとして「click」を設定しておきます。

 その後「4.CSSの設定」において「td.hover, tr.hover{background-color: 色名;}」「td.click, th.click{background-color: 色名;}」といった形で「td.」「tr.」の後に、「3.プラグインの設定」で定義した「hover」「click」などのクラス名を定義し、色名などを定義します。リスト3のスクリプトでは表の上にカーソルがある時、そのセルの行と列を青で表示し、セル上でクリックした後その行と列を赤で表示するように設定しています。

表示に関するオプション

 tableHoverメソッドのオプションの一部を表5に示します。その他のオプションに関してはtableHoverプラグインのサイトのサンプルページでも紹介されています。

表5 表示オプション
オプション名 既定値 概要
allowBody true 表のbody部分の設定。falseを設定すると、カーソルを動かしたりクリックしたりしても色を付けられない。
ignoreCols [] []の中に[2,3]といった形で列番号を設定すると、設定した列のみカーソルを動かしたりクリックしたりしても色を付けられない。

まとめ

 HTMLでのテーブルの作成はとかく厄介なものですが、現在テーブルを操作できるjQueryプラグインは非常にたくさん公開されていて、数行のスクリプトを加えるだけで、見栄えが良く様々な処理ができるテーブルをウェブサイト上に表示することが可能です。今回紹介したものはそのほんの一部で比較的単純な処理を行うプラグインですが、さらに複雑な処理ができるテーブルや見栄えの良いテーブルを表示できるプラグインもたくさんあります。こうした様々なjQueryプラグインを用いてウェブサイト上で様々な処理ができるテーブルを表示させてみてはいかがでしょうか。

参考資料



  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:jQuery UI/プラグインの活用

もっと読む

著者プロフィール

  • WINGSプロジェクト 小林 健志(コバヤシ タケシ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XM...

あなたにオススメ

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5