ホームページ作成/表示・非表示の切替 (HTML,CSS,JavaScript)

表の特定の列だけを抜粋して表示できるようにする方法(2ページ目)

ウェブ上に掲載している表組み(テーブル)でも、閲覧者が列の「表示・非表示」を切り替えられるようにしてみましょう。不要な列を非表示にできると、列数の多い表でも列幅が狭くなりすぎるのを防げ、見やすさを維持できます。

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

表示する列を制限・指定できるスクリプト「MediaTable」を入手する

「Download ZIP」ボタンで一括ダウンロード

「Download ZIP」ボタンで一括ダウンロード

まずは、スクリプト「MediaTable」を入手しましょう。GitHubサイトで公開されていますので、以下のダウンロードページにブラウザでアクセスしてダウンロードして下さい。
https://github.com/thepeg/MediaTable

右図のように、ページ右側にある「Download ZIP」ボタンをクリックすると、スクリプト一式をZIP形式の圧縮ファイルとしてダウンロードできます。

ZIPファイルのサイズは(本稿執筆時点では)わずか9.72KBで、非常に軽量です。


 

必要な3ファイルを抜き出してアップロード

1つのCSSと、2つのJavaScriptファイルのみが必要。

1つのCSSと、2つのJavaScriptファイルのみが必要。

ダウンロードしたZIPファイルを展開すると、下記の4つのファイルが出てきます。
  • 「index.html」 :サンプルHTML
  • 「jquery.mediaTable.css」 :スタイルシート
  • 「jquery.mediaTable.js」 :スクリプト本体
  • 「respond.min.js」 :古いIE用の補助スクリプト
このうち、「index.html」ファイルは表示サンプルですから不要です。それ以外の3ファイルを、ウェブサーバ上の任意の場所にアップロードして下さい。


 
別途、jQueryが必要
別途jQueryファイルが必要

別途jQueryファイルが必要

このスクリプト「MediaTable」は、JavaScriptのライブラリ「jQuery」を利用して動作します。そのため、別途「jQuery」本体の読み込みが必要です。

既にjQueryを自身のウェブサーバ上にアップロードしている場合は、それを利用すれば問題ありません。アップロードしていない場合でも、CDN(Contents Delivery Network)経由で読み込みが可能ですから、特に自分でアップロードする必要はありません。詳しい書き方は、次のページでご紹介しています。

※インターネットに接続されていないローカル環境で動作させたい場合には、ローカル上にjQueryの本体ファイルが必要ですのでご注意下さい。

さて、各ファイルをウェブ上にアップロードできたら、次にウェブページ上のテーブル(table要素)に対して、スクリプトを適用するようHTMLを記述しましょう。
  • 前のページへ
  • 1
  • 2
  • 3
  • 次のページへ

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます