SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

jQuery UI/プラグインの活用

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

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

カーソルを合わせると行・列を色付き表示できる - 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プラグインを用いてウェブサイト上で様々な処理ができるテーブルを表示させてみてはいかがでしょうか。

参考資料

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
jQuery UI/プラグインの活用連載記事一覧

もっと読む

この記事の著者

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

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

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

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

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/6636 2012/07/03 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング