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

  • Posted on
  • Category : Tips
table周りで便利なスニペットやプラグイン

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

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

  1. ゼブラテーブル(CSS)
  2. ゼブラテーブル(jQuery)
  3. 列にクラスを付加する
  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

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

CSS

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

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

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

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

目次へ

3. 列にクラスを付加する

列にクラスを付加する

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

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

jQuery

$(document).ready(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に指定にしてそれぞれ任意のクラスを付加するように記述し、あとはCSSでスタイルを設定すれば特定の列だけ見栄えの変更などを行うことができます。

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

CSS3で特定の列を装飾する

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

CSS

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

目次へ

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

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

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

CSS

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

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

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

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

jQuery

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

CSS

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

マウスオーバー時にhoverというクラスが付加されるようにjQueryで記述し、あとはCSSでそのクラスに対して背景色を指定してあげれば、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

$(document).ready(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="http://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="http://www.nxworld.net/">NxWorld</a></td>
	</tr>
	<tr data-href="http://www.apple.com/">
		<td>Row 3</td>
		<td>この行は Apple にリンクされています</td>
		<td><a href="http://www.nxworld.net/">NxWorld</a></td>
	</tr>
	<tr data-href="http://www.microsoft.com/">
		<td>Row 4</td>
		<td>この行は Microsoft にリンクされています</td>
		<td><a href="http://www.nxworld.net/">NxWorld</a></td>
	</tr>
	<tr data-href="http://wordpress.org/">
		<td>Row 5</td>
		<td>この行は WordPress にリンクされています</td>
		<td><a href="http://www.nxworld.net/">NxWorld</a></td>
	</tr>
</table>

CSS

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

jQuery

$(document).ready(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要素の数値を取得・判別をし、その数値によって別々のクラスを付加することでそれぞれ異なる背景色に変更する方法です。
jQueryを使用するので予め読み込ませておき、それぞれ以下のように記述します。

jQuery

$(document).ready(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文でそれぞれ値と付加するクラスを記述します。
また、このサンプルでは価格を想定して「¥」と「,」が入っているので、6行目はそれらを取り除く記述になります。
あとは、CSSでそれぞれのクラスに対して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

$(document).ready(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では上下でアニメーションするものや、左へ現在の内容が流れるように消えていった後に右からソートされた内容が流れてくるというような動きがあります。
プラグインのダウンロードや詳細、デモなどは以下より。

目次へ

Back to Top

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

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

/ Tips

Tagged with:

NxWorld

Sorry... doesn't support your browser

To get the best possible experience using our site we recommend that you upgrade to a modern web browser.NxWorldではご利用中のブラウザサポートはしていません。
Internet Explorerのアップグレード行う、もしくはその他のブラウザを使用しての閲覧をお願いします。