table周りで便利なスニペットやプラグイン

Tips

table周りで便利なスニペットやプラグイン

忘れてしまったときや使おうと思うときにすぐ見れるよう、table周りで使えるちょっとしたスニペットやプラグインの備忘録です。
幾つかまとめていますが、こっちの方法のが良いとかもっと良いプラグインとか、そもそもこれダメだよとかあれば是非教えていただけると嬉しいです。

table周りで便利なスニペットやプラグイン 目次

  1. ゼブラテーブル(CSS)
  2. ゼブラテーブル(jQuery)
  3. 列にclassを付加する
  4. マウスオーバーで行の背景色を変更する
  5. ユーザー側で行を削除できるようにする
  6. 行にリンクを設定する
  7. セル幅を均等にする
  8. セル内の自動的な折り返しを禁止する
  9. 数値によって背景色を変更する
  10. レスポンシブWebデザインに対応させる
  11. 簡単に見出しを固定できるjQueryプラグイン「Freezeheader」
  12. ソート機能を付けるjQueryプラグイン3選
    1. Tablesorter 2.0
    2. Stupid jQuery Table Sort
    3. jQuery Animated Table Sorter

1. ゼブラテーブル(CSS)

ゼブラテーブル(CSS)

情報量が多くなりテーブルが長くなってしまったときなどに、少しでも見やすくなるよう行を交互にカラーリングする方法です。
実装にはCSS3のnth-childを使い、下記のように記述します。

CSS

table tr:nth-child(odd) {
  background-color: #f4fcfe;
}

上記を記述することで、奇数のtrの背景色のみを変更することができます。
偶数にしたい場合は、ハイライト部分でoddとなっているところをevenに変更します。
また、ハイライト部分を3nにすれば3の倍数、5nにすれば5の倍数というような指定もできます。

実際の表示は以下で確認できます。

目次へ

2. ゼブラテーブル(jQuery)

ゼブラテーブル(jQuery)

IEのバージョンによってはCSS3に対応していないため、先程の方法では背景色が変更されていない場合があります。
どのブラウザでも同じ見栄えにしたい場合は、jQueryを使用することで実装します。
jQueryを使用するので予め読み込ませておき、それぞれ下記のように記述します。

jQuery

$(function() {
  $('table tr:nth-child(odd)').addClass('odd');
});

CSS

table .odd {
  background-color: #f4fcfe;
}

jQueryで奇数のtr.oddというclassを付加させ、あとはCSSで背景色を指定すれば実装ができます。
偶数にしたい場合などは先程のCSSと同様で、oddとなっているところをevenに変更します。

ちなみに上記ではclassを付加してCSSで背景色を指定していますが、もちろんjQueryで指定するのでも問題ないです。
上記の場合であれば、$('table tr:nth-child(odd)').css('background-color','f4fcfe');のように記述することで同じ見栄えを実装できます。

実際の表示は以下で確認できます。

目次へ

3. 列にclassを付加する

列にclassを付加する

例えば特定の列だけ背景色を変更したいとかテキストを右寄せしたい場合などに、thやtdといった要素に直接class指定するのをjQueryを使って実装する方法です。
thtdといった要素にclassを記述していく方法だとセルが増えたときや順番を変更したいときなどに何かと面倒ですが、この方法を使えばそういったときも簡単に調整ができます。

サンプルとして4列ある中で一番左列のtdcolorというclassを付加して背景色を指定し、一番右列のtdrightというclassを付加してテキストの右寄せを指定します。
jQueryを使用するので予め読み込ませておき、下記のように記述します。

jQuery

$(function() {
  $('table td:nth-child(1)').addClass('color');
  $('table td:nth-child(4)').addClass('right');
});

CSS

table .color {
  background-color: #f4fcfe;
}
table .right {
  text-align: right;
}

先程ゼブラテーブルでも使用したnth-childtrではなくtdに指定にしてそれぞれ任意のclassを付加するように記述し、あとはCSSでスタイルを設定すれば特定の列だけ見栄えの変更などを行うことができます。

実際の表示は以下で確認できます。

CSS3で特定の列を装飾する

ちなみに、今回は全てのブラウザで問題なく表示できるようjQueryを使用する方法を紹介していますが、IEは非対応でも構わないということであればCSS3を使ってclassを使わないような形で実装ができます。
CSS3を使って実装したい場合は下記のように記述します。

CSS

table td:nth-child(1) {
  background-color: #f4fcfe;
}
table td:nth-child(4) {
  text-align: right;
}

目次へ

4. マウスオーバーでセルの背景色を変更する

マウスオーバーでセルの背景色を変更する

ゼブラテーブル同様、見やすくするためによく用いられるセルにマウスオーバーすると背景色が変更されるのを実装します。
特に難しいことはなく単純に:hover擬似classを使用するだけで実装でき、下記はtr要素に実装する方法です。

CSS

table tr:hover {
  background-color: #f4fcfe;
}

実際の表示は以下で確認できます。

マウスオーバーでセルの背景色を変更する(IE6対応)

もうほとんど使うことはないかもしれませんが、IE6では:hover擬似classをa要素以外に使えないことから先程の方法では実装することができません。
IE6でも同じようにしたいという場合はjQueryを使うことで実装ができます。
jQueryを使用するので予め読み込ませておき、それぞれ以下のように記述します。

jQuery

$(function() {
  $('table tr').mouseover(function(){
    $(this).addClass('hover');
  }).mouseout(function(){
    $(this).removeClass('hover');
  });
});

CSS

table .hover {
  background-color: #f4fcfe;
}

マウスオーバー時に「hover」というclassが付加されるようにjQueryで記述し、あとはCSSでそのclassに対して背景色を指定してあげれば、IE6でもマウスオーバーで背景色を変更することができます。

目次へ

5. ユーザー側で行(セル)を削除できるようにする

ユーザー側で行(セル)を削除できるようにする

そんなに実装されているところを見たことはないのですが、何かの機会で使うかもしれないし覚えておきたいので備忘録です。
沢山の情報量があるテーブルなどで、ユーザーが必要ないと感じた行(セル)を任意で削除できるようにする方法です。
jQueryを使用するので予め読み込ませておき、それぞれ下記のように記述します。

HTML

<table>
  <tr>
    <th>Title 1</th>
    <th>Title 2</th>
    <th>Title 3</th>
    <th>行の削除</th>
  </tr>
  <tr>
    <td>Row 1</td>
    <td>Row 1</td>
    <td>Row 1</td>
    <td><span  class="remove">この行を削除する</span></td>
  </tr>
      ・
      ・
      ・
      ・
      ・
  <tr>
    <td>Row 5</td>
    <td>Row 5</td>
    <td>Row 5</td>
    <td><span class="remove">この行を削除する</span></td>
  </tr>
</table>

CSS

table .remove {
  cursor: pointer;
}

jQuery

$(function() {
  $('table .remove').click(function(){
    $(this).parent().parent().remove();
  });
});

jQueryでclass="remove"が指定されているspan要素をクリックするとその親要素を削除するように記述し、CSSでspan要素がクリックできることがわかりやすいようにcursor: pointerを記述します。

実際の表示は以下で確認できます。
DEMOでは削除できる行(セル)をわかりやすくするために、上記機能と併せてCSSでマウスオーバー時に背景色を変えるのも同時に実装しています。

目次へ

6. 行にリンクを設定する

セルの中のa要素ではなく、tr要素にリンク先を設定して行全体をクリックできるようにする方法です。
もしセル内に別のリンク先がある場合は、クリックされた際にそちらが優先されます。
jQueryを使用するので予め読み込ませておき、それぞれ下記のように記述します。

HTML

<table>
  <tr>
    <th>Title 1</th>
    <th>リンク先</th>
    <th>アンカー</th>
  </tr>
  <tr data-href="https://www.google.co.jp/">
    <td>Row 1</td>
    <td>この行は Google にリンクされています</td>
    <td><a href="https://www.nxworld.net/">NxWorld</a></td>
  </tr>
  <tr data-href="http://www.yahoo.co.jp/">
    <td>Row 2</td>
    <td>この行は Yahoo! にリンクされています</td>
    <td><a href="https://www.nxworld.net/">NxWorld</a></td>
  </tr>
  <tr data-href="http://www.apple.com/">
    <td>Row 3</td>
    <td>この行は Apple にリンクされています</td>
    <td><a href="https://www.nxworld.net/">NxWorld</a></td>
  </tr>
  <tr data-href="http://www.microsoft.com/">
    <td>Row 4</td>
    <td>この行は Microsoft にリンクされています</td>
    <td><a href="https://www.nxworld.net/">NxWorld</a></td>
  </tr>
  <tr data-href="http://wordpress.org/">
    <td>Row 5</td>
    <td>この行は WordPress にリンクされています</td>
    <td><a href="https://www.nxworld.net/">NxWorld</a></td>
  </tr>
</table>

CSS

table tr {
  cursor: pointer;
}
table .clickable:hover {
  background-color: #f4fcfe;
}

jQuery

$(function() {
  $('table tr[data-href]').addClass('clickable').click(function(e) {
    if(!$(e.target).is('a')){
      window.location = $(e.target).closest('tr').data('href');
    };
  });
});

HTMLでtr要素にdata-hrefに行をクリックした際のリンク先を指定し、CSSではクリックできることやマウスオーバーしたときの状態がわかりやすくなるような指定をします。
最後にjQueryで、クリックした要素がa要素以外であれば、その要素の先祖要素で一番近いtr要素のdata-href属性の値に書かれているURLに遷移するように記述をします。

実際の表示は以下で確認できます。

目次へ

7. セル幅を均等にする

デフォルトではそれぞれのセル内に書かれいる内容によって幅が決定・表示されるため、意図した見栄えやバランスのとれた表示にするためにthtdwidth指定をする人は多いと思います。
それぞれのセルの大きさを全て違う幅にしたい場合は、先述したように任意の数値をCSSで指定してやれば良いのですが、単純に全てのセルを均等にしたい場合はわざわざthtdそれぞれにwidth指定をしなくても、table-layoutというプロパティを使うことで簡単に各セル幅を均等にすることができます。

CSS

table {
  width: 100%;
  table-layout: fixed;
}

デフォルトではtable-layoutの値はautoになっているので、それを上記のようにfixedに変更します。
ちなみに、autoの場合はテーブル全体を読み込み後に各セル幅など決定・表示するのに対して、fixedの場合は1行目を読み込んだ時点で幅を決定して表示し始めるので、デフォルトよりもfixedの方が早く表示されるらしいです。
(個人的にはそこまで内容が長くないものなら対して変わらないです...)

目次へ

8. セル内の自動的な折り返しを禁止する

具体的な使用例というか使う場面を上手く説明できませんが、例えば特にセル幅は指定していないけど見出し(th)の内容は改行せずに表示したいときなどに便利なプロパティです。
個人的には結構使うことが多いです。

CSS

table th {
  white-space: nowrap;
}

上記を記述するとデフォルトで折り返されてしまうセル内のテキストが改行されずに表示されるようになります。

目次へ

9. 数値によって背景色を変更する

数値によって背景色を変更する

td要素の数値を取得・判別をし、その数値によって別々のclassを付加することでそれぞれ異なる背景色に変更する方法です。
jQueryを使用するので予め読み込ませておき、それぞれ下記のように記述します。

jQuery

$(function() {
  $('table tr').each(function() {
    //2番目のカラムを取得
    var price = $('td', this).eq(1).text();
    //価格を数値に変換
    price = price.replace(/,|\¥/gi,'');
    if (price < 3000) {
      $(this).addClass('level1');
    } else if (price < 10000) {
      $(this).addClass('level2');
    } else {
      $(this).addClass('level3');
    }
  });
});

CSS

table .level1 {
  background-color: #9dd7e6;
}
table .level2 {
  background-color: #a4eed2;
}
table .level3 {
  background-color: #efa3a3;
}

jQueryの記述の4行目でどのカラムの数値を取得するか記述し、あとはif文でそれぞれ値と付加するclassを記述します。
また、このサンプルでは価格を想定して「¥」と「,」が入っているので、6行目はそれらを取り除く記述になります。
あとは、CSSでそれぞれのclassに対してbackground-colorを指定することで実装できます。

ちなみに、同じようにjQueryを使って値を取得して背景色を変更するものだと以下のようなものもあり、タイトルにも書かれているように、ヒートマップのような大量のデータを扱う際に非常に見易くすることができます。

数値によって背景色を変更する(ヒートマップ向け)

目次へ

10. レスポンシブWebデザインに対応させる

正直自分の中で「これ!」っていうのがなく、普段の案件などでも可能であれば見易さなどいろいろと考慮してテーブル以外の形で代用したりすることが多いです...。
ただ、どうしてもテーブルでやらなければいけない場合もあるので、そんなときは「Design Spice」さんの「レスポンシブWebデザインでテーブルを使う時の小技」をよく参考にさせてもらっています。
やはりIEがネックな感じではあるんですが、CSSやjQueryを使った全8種の対応方法がサンプル付きで解りやすくまとめられています。

目次へ

11. 簡単に見出しを固定できるjQueryプラグイン「Freezeheader」

CSSだけで実装するなど他にも方法はありますが、幾つか試してきた中で一番手軽だなと感じたjQueryプラグイン「freezeheader」を紹介します。
特に難しい記述などすることもなく、通常のテーブルで簡単に実装できます。

使用方法

Freezeheader」からファイルをダウンロードし、jQueryとjquery.freezeheader.jsを読み込ませた後、下記のようにそれぞれ記述します。

HTML

<table id="freezeheader">
  <thead>
    <tr>
      <th>Title 1</th>
      <th>Title 2</th>
      <th>Title 3</th>
      <th>Title 4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Row 1</td>
      <td>Row 1</td>
      <td>Row 1</td>
      <td>Row 1</td>
    </tr>
      ・
      ・
      ・
      ・
      ・
    <tr>
      <td>Row 20</td>
      <td>Row 20</td>
      <td>Row 20</td>
      <td>Row 20</td>
    </tr>
  </tbody>
</table>

jQuery

$(function() {
  $('#freezeheader').freezeHeader();
});

見ての通り、たったこれだけの記述で上記ソースの場合はtheadが固定されるようになります。
また、$("#freezeheader").freezeHeader({ 'height': '300px' });のようにして高さを指定すると、スクロールバーが出るようなタイプ(多少CSSの調整が必要)にもなります。

ブラウザ対応はIEでも8以降であれば問題なく動き、Androidでは確認してませんがiPhoneでは問題なく動きました。
実際の動きやファイルのダウンロードなどはそれぞれ以下。

目次へ

12. ソート機能を付けるjQueryプラグイン3選

以下は見出し(th)をクリックするとtdが昇順・降順とソートできる機能を付けることができるjQueryプラグインです。
中にはソート時にちょっとしたアニメーションが付けられるものもあります。

12-1. Tablesorter 2.0

Tablesorter 2.0

少し古いのが気になるところですが、シンプルなソート機能を実装できるプラグイン。
オプションもいくつか用意されており、table要素外の要素をクリックでソートしたり、マルチソート機能の実装もできます。
プラグインのダウンロードや詳細、デモなどは以下より。

12-2. Stupid jQuery Table Sort

Stupid jQuery Table Sort

同じくシンプルなソート機能を実装できるんですが、ばかばかしいほど軽量が特徴のプラグイン。
プラグインのダウンロードや詳細、デモなどは以下より。

12-3. jQuery Animated Table Sorter

jQuery Animated Table Sorter

こちらも同じくシンプルなソート機能も実装できるんですが、上記2つとは違ってソート時の動きに「fade」や「slide」といったアニメーションを簡単に付加することができます。
アニメーションは幾つか用意されており、例えば「slide」では上下でアニメーションするものや、左へ現在の内容が流れるように消えていった後に右からソートされた内容が流れてくるというような動きがあります。
プラグインのダウンロードや詳細、デモなどは以下より。

目次へ

Close the search window,
please press close button or esc key.