SHOEISHA iD

パスワードを忘れた場合はこちら

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

  • 新規
    会員登録
  • 新規会員登録

ニュース

記事

デブサミ・デブスト

講座

書籍

新着記事一覧を見る

連載記事

人気記事の執筆者

加山 恵美

渡部 拓也

橋原 朋央（株式会社NTTデータ）

ZOE

WINGSプロジェクト 山内 直
イベント
イベント

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

講演資料・動画まとめページ

Developers CAREER Boost 2024 講演資料まとめ

Developers X Summit 2024 講演資料まとめ

Developers Summit 2024 KANSAI 講演関連資料まとめ

Developers Summit 2024 Summer 講演資料まとめ

Developers Boost 2024 講演資料まとめ

Developers Summit 2024 講演資料まとめ

CodeZine BOOKS（コードジン・ブックス）は、CodeZineの連載からカットアップした、開発現場の課題解決に役立つ書籍シリーズです。

書籍に関する記事を見る

'); googletag.cmd.push(function() { googletag.pubads().addEventListener('slotRenderEnded', function(e) { var ad_id = e.slot.getSlotElementId(); if (ad_id == 'div-gpt-ad-1659428980688-0') { var ad = $('#'+ad_id).find('iframe'); if ($(ad).width() == 728) { var ww = $(window).width(); ww = ww*0.90; var style = document.createElement("style"); document.head.appendChild( style ); var sheet = style.sheet; sheet.insertRule( "#div-gpt-ad-1659428980688-0 iframe {-moz-transform: scale("+ww/728+","+ww/728+");-moz-transform-origin: 0 0;-webkit-transform: scale("+ww/728+","+ww/728+");-webkit-transform-origin: 0 0;-o-transform: scale("+ww/728+","+ww/728+");-o-transform-origin: 0 0;-ms-transform: scale("+ww/728+","+ww/728+");-ms-transform-origin: 0 0;}", 0 ); sheet.insertRule( "#div-gpt-ad-1659428980688-0 div{ height:"+(90*ww/728)+"px;width:"+728+"px;}", 0 ); } else { if ($(window).width() < 340) { var ww = $(window).width(); ww = ww*0.875; var style = document.createElement("style"); document.head.appendChild( style ); var sheet = style.sheet; sheet.insertRule( "#div-gpt-ad-1659428980688-0 iframe {-moz-transform: scale("+ww/320+","+ww/320+");-moz-transform-origin: 0 0;-webkit-transform: scale("+ww/320+","+ww/320+");-webkit-transform-origin: 0 0;-o-transform: scale("+ww/320+","+ww/320+");-o-transform-origin: 0 0;-ms-transform: scale("+ww/320+","+ww/320+");-ms-transform-origin: 0 0;}", 0 ); sheet.insertRule( "#div-gpt-ad-1659428980688-0 div{ height:"+(180*ww/320)+"px;width:"+320+"px;}", 0 ); } } } }); }); } else { document.write('
'); document.write('
'); }
jQuery UI／プラグインの活用

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

「jQuery プラグイン」の利用（10）

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

ダウンロード サンプルファイル (54.2 KB)

　本連載では、JavaScriptライブラリの中でも人気が高まりつつあるjQuery UIとjQueryプラグインをサンプルを交えて紹介していきます。今回は、テーブル操作をテーマにしたjQueryプラグインを紹介します。

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

はじめに

　今回は、テーブルの見栄えを良くしたり、様々な機能を簡単に追加したりできるjQueryプラグインを解説します（表1）。

表1　紹介するjQueryプラグイン
名前 概要
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プラグインを使ったサンプルの実行例

図1　jquery.columnfiltersプラグイン適用後
図1　jquery.columnfiltersプラグイン適用後

　続いてフォームに文字を入れて、その文字から始まる行のみを表示した状態を図2に示します。Aの項目でSから始まる言葉がある行のみが表示されていることが分かります。

図2　jquery.columnfiltersプラグイン検索処理後
図2　jquery.columnfiltersプラグイン検索処理後

　また、検索の際には「*」をワイルドカードとして機能させることができます。Dの項目で0を含む数字がある行のみを表示した状態を図3に示します。

図3　jquery.columnfiltersプラグインワイルドカード検索処理後
図3　jquery.columnfiltersプラグインワイルドカード検索処理後

jquery.columnfiltersプラグインの使い方

　使用方法は、jquery.columnfiltersプラグインのサイト上の「Download the source」から「columnfilters.zip」というファイルをダウンロードして保存し、解凍後、ソースデータ「jquery.columnfilters.js」を「plugins」フォルダ下に配置します。

　リスト1にjquery.columnfiltersプラグインの使用例を示します。

リスト1　jquery.columnfiltersプラグインの使用例（jquery_columnfilters.html） 
<!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名を付与するだけで、検索窓付きの表が完成します。

オプションによる様々な検索

　検索オプションとしては以下のものがあります。

表2　検索オプション
検索窓に入れる記号 名前 概要
* wildcard *の後に入力した文字を含む行のみを表示（通常の場合文字を入力すると、その文字から始まる行のみを表示）
! notcharacter !の後に入力した文字から始まらない行のみを表示

　これらの検索オプションは「.columnFilter();」の括弧内で

$(document).ready(function() {
  $('table#id名').columnFilters({wildCard:'#',notCharacter:'?'});
});

　と設定すると、wildcardとして使用する文字を*から#に、notcharacterで使用する文字を!から?に、といった形で変更できます。

多彩な設定オプション

　また、様々な設定オプションも用意されています。

表3　設定オプション
オプション名 既定値 概要
caseSensitive false 大文字・小文字を区別するか
minSearchCharacters 1 何文字入力されたら検索を実施するか
excludeColumns [] 検索窓を設けない列（列番号を配列で指定）
alternateRowClassNames [] 交互の行にスタイルクラスを割り当てる（任意のスタイルクラスを設定可能）

　これらも例えばcaseSensitiveをtrueにして大文字・小文字まで正確に入力を促す場合は「.columnFilters();」の括弧内で変更可能であり、以下のように変更します。

$(document).ready(function() {
  $('table#id名').columnFilters({ caseSensitive:true });
});

会員登録無料すると、続きをお読みいただけます

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

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

メールバックナンバー

次のページ
csv形式の表を読み込み、ソート可能なテーブルとして表示できる - jquery.csv2table.jsプラグイン

NEXT

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

  • 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 X: @WingsPro_info（公式）、@WingsPro_info/wings（メンバーリスト） Facebook

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

この著者の最近の執筆記事

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

この記事をシェア

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

おすすめ

アクセスランキング

  1. 1
    実はITエンジニアの設計力が求められるkintone、その仕組みとポイントを事例に学ぶ
  2. 2
    C# 13の新機能を理解する――paramsコレクションと新しいロックセマンティクス
  3. 3
    ITエンジニア本大賞2025、ベスト10選出！ 技術書部門とビジネス書部門の大賞はどうなる!?
  4. 4
    デスクトップアプリ開発に必要な「Rust」の文法を理解しよう
  5. 5
    総務省、データサイエンス・オンライン講座「誰でも使える統計オープンデータ」をリニューアル開講
  1. 6
    プログラミング未経験からのITエンジニアへ転職の実態を調査、TAG STUDIOが発表
  2. 7
    Renewer、Tips集「生成AI × 勉強法ガイドブック 2025」を公開
  3. 8
    Linuxデスクトップ向けソフトウェアデプロイメントシステム「Flatpak」の最新バージョンリリース
  4. 9
    デスクトップアプリを開発しよう！ 「Rust」と「Tauri 2.0」の基本情報と環境整備の仕方を解説
  5. 10
    ガントチャートをWebアプリに組み込める「ガントシート」でプロジェクト管理機能を作成してみよう

アクセスランキング

  1. 1
    実はITエンジニアの設計力が求められるkintone、その仕組みとポイントを事例に学ぶ
  2. 2
    C# 13の新機能を理解する――paramsコレクションと新しいロックセマンティクス
  3. 3
    ITエンジニア本大賞2025、ベスト10選出！ 技術書部門とビジネス書部門の大賞はどうなる!?
  4. 4
    デスクトップアプリ開発に必要な「Rust」の文法を理解しよう
  5. 5
    総務省、データサイエンス・オンライン講座「誰でも使える統計オープンデータ」をリニューアル開講
  6. 6
    プログラミング未経験からのITエンジニアへ転職の実態を調査、TAG STUDIOが発表
  7. 7
    Renewer、Tips集「生成AI × 勉強法ガイドブック 2025」を公開
  8. 8
    Linuxデスクトップ向けソフトウェアデプロイメントシステム「Flatpak」の最新バージョンリリース
  9. 9
    デスクトップアプリを開発しよう！ 「Rust」と「Tauri 2.0」の基本情報と環境整備の仕方を解説
  10. 10
    ガントチャートをWebアプリに組み込める「ガントシート」でプロジェクト管理機能を作成してみよう
  1. 1
    アジャイル開発の推進において、必ずしも"すごい人"は必要ない──現場のエンジニアがDevOps推進で実現する組織改革
  2. 2
    ガントチャートをWebアプリに組み込める「ガントシート」でプロジェクト管理機能を作成してみよう
  3. 3
    1/10まで全文無料公開、人気の入門書シリーズ『いきなりプログラミング Androidアプリ開発』
  4. 4
    デスクトップアプリ開発に必要な「Rust」の文法を理解しよう
  5. 5
    "けしからん"精神が切り拓く未来──IPA登氏が語る、技術大国・日本が目指す復活戦略
  6. 6
    Google、社内AIエージェント「Google Agentspace」発表
  7. 7
    JavaScriptのWebフレームワーク、「Astro 5.1」リリース
  8. 8
    ITエンジニア本大賞2025、ベスト10選出！ 技術書部門とビジネス書部門の大賞はどうなる!?
  9. 9
    実はITエンジニアの設計力が求められるkintone、その仕組みとポイントを事例に学ぶ
  10. 10
    テストは増え続ける、でもボトルネックにはできない──テスト効率化の2つのカギを朱峰 錦司氏が解説！

イベント

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

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

メールバックナンバー

アクセスランキング

  1. 1
    実はITエンジニアの設計力が求められるkintone、その仕組みとポイントを事例に学ぶ
  2. 2
    C# 13の新機能を理解する――paramsコレクションと新しいロックセマンティクス
  3. 3
    ITエンジニア本大賞2025、ベスト10選出！ 技術書部門とビジネス書部門の大賞はどうなる!?
  4. 4
    デスクトップアプリ開発に必要な「Rust」の文法を理解しよう
  5. 5
    総務省、データサイエンス・オンライン講座「誰でも使える統計オープンデータ」をリニューアル開講
  1. 6
    プログラミング未経験からのITエンジニアへ転職の実態を調査、TAG STUDIOが発表
  2. 7
    Renewer、Tips集「生成AI × 勉強法ガイドブック 2025」を公開
  3. 8
    Linuxデスクトップ向けソフトウェアデプロイメントシステム「Flatpak」の最新バージョンリリース
  4. 9
    デスクトップアプリを開発しよう！ 「Rust」と「Tauri 2.0」の基本情報と環境整備の仕方を解説
  5. 10
    ガントチャートをWebアプリに組み込める「ガントシート」でプロジェクト管理機能を作成してみよう

アクセスランキング

  1. 1
    実はITエンジニアの設計力が求められるkintone、その仕組みとポイントを事例に学ぶ
  2. 2
    C# 13の新機能を理解する――paramsコレクションと新しいロックセマンティクス
  3. 3
    ITエンジニア本大賞2025、ベスト10選出！ 技術書部門とビジネス書部門の大賞はどうなる!?
  4. 4
    デスクトップアプリ開発に必要な「Rust」の文法を理解しよう
  5. 5
    総務省、データサイエンス・オンライン講座「誰でも使える統計オープンデータ」をリニューアル開講
  6. 6
    プログラミング未経験からのITエンジニアへ転職の実態を調査、TAG STUDIOが発表
  7. 7
    Renewer、Tips集「生成AI × 勉強法ガイドブック 2025」を公開
  8. 8
    Linuxデスクトップ向けソフトウェアデプロイメントシステム「Flatpak」の最新バージョンリリース
  9. 9
    デスクトップアプリを開発しよう！ 「Rust」と「Tauri 2.0」の基本情報と環境整備の仕方を解説
  10. 10
    ガントチャートをWebアプリに組み込める「ガントシート」でプロジェクト管理機能を作成してみよう
  1. 1
    アジャイル開発の推進において、必ずしも"すごい人"は必要ない──現場のエンジニアがDevOps推進で実現する組織改革
  2. 2
    ガントチャートをWebアプリに組み込める「ガントシート」でプロジェクト管理機能を作成してみよう
  3. 3
    1/10まで全文無料公開、人気の入門書シリーズ『いきなりプログラミング Androidアプリ開発』
  4. 4
    デスクトップアプリ開発に必要な「Rust」の文法を理解しよう
  5. 5
    "けしからん"精神が切り拓く未来──IPA登氏が語る、技術大国・日本が目指す復活戦略
  6. 6
    Google、社内AIエージェント「Google Agentspace」発表
  7. 7
    JavaScriptのWebフレームワーク、「Astro 5.1」リリース
  8. 8
    ITエンジニア本大賞2025、ベスト10選出！ 技術書部門とビジネス書部門の大賞はどうなる!?
  9. 9
    実はITエンジニアの設計力が求められるkintone、その仕組みとポイントを事例に学ぶ
  10. 10
    テストは増え続ける、でもボトルネックにはできない──テスト効率化の2つのカギを朱峰 錦司氏が解説！