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

忘れてしまったときや使おうと思うときにすぐ見れるよう、table周りで使えるちょっとしたスニペットやプラグインの備忘録です。

ゼブラテーブル（CSS）

ゼブラテーブル（CSS）の実装イメージ

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

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

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

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

Demo

ゼブラテーブル（jQuery）

ゼブラテーブル（jQuery）の実装イメージ

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

jQuery

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

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');のように記述することで同じ見栄えを実装できます。

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

Demo

列にclassを付加する

列にclassを付加する実装イメージ

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

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

jQuery

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

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

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

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

Demo

CSS3で特定の列を装飾する

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

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

Demo

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

マウスオーバーでセルの背景色を変更する実装イメージ

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

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

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

Demo

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

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

jQuery

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

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

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

Demo

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

ユーザー側で行（セル）を削除できるようにする実装イメージ

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

<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>

table .remove {
  cursor: pointer;
}

jQuery

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

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

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

Demo

[jQuery] tableのtr要素をクリックで削除できるようにする – かちびと.net

行にリンクを設定する

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

<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>

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に遷移するように記述をします。

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

Demo

セル幅を均等にする

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

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

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

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

具体的な使用例というか使う場面を上手く説明できませんが、例えば特にセル幅は指定していないけど見出し（th）の内容は改行せずに表示したいときなどに便利なプロパティで、個人的には結構使うことが多いです。
下記を記述するとデフォルトで折り返されてしまうセル内のテキストが改行されずに表示されるようになります。

table th {
  white-space: nowrap;
}

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

数値によって背景色を変更する実装イメージ

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');
    }
  });
});

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

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

Demo

5. 一定の数値ごとに色を変化させる - jQueryでテーブル（table）を操作する小回り系コード5種 | webOpixel

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

テーブルの数値にヒートマップ効果を加える - かちびと.net

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

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

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

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

使用方法

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

<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では問題なく動きました。
実際の動きやファイルのダウンロードなどはそれぞれ以下。

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

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

Tablesorter 2.0

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

jQuery plugin: Tablesorter 2.0

Stupid jQuery Table Sort

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

jQuery Table Sort | The Stupid Table Plugin by JoeQuery

jQuery Animated Table Sorter

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

jQuery Animated Table Sorter