【CSS/jQuery】表（テーブル）でクリックした行をハイライト表示させる方法

ウェブサイトでたくさん行が並んでいる表がありますよね。

たとえば料金表などは、行がいっぱいあって自分が見たい行を見失ってしまうことも多いと思います。

ぼく自身がいつも悩まされているので、自分の作るサイトでは見たい行がすぐにわかるようにしようって思いカスタマイズすることにしました。

こんな感じの表を作りますよ。

こうしておけば選んだ行がハイライト表示されて目立つので、見たい行がすぐわかります。

準備

今回はWordPressで使うのを前提に説明していきますね。

もちろんWordPressを使わないサイトでもスタイルシートとJavaScript（jQuery）を使えば同じことはできます。

それでは準備として必要なものを挙げますね。

WordPress
スタイルシート
jQuery

WordPressでブログを作っているならすでに全部揃っているはずなので、特に何かを新たに用意する必要はありません。

スタイルシート（CSS）とjQueryを追加するので、どのファイルを触るかだけは確認していきましょう。

ぼくが使っているWordPressのテーマ「Cocoon」では以下のファイルを編集していきます。

フェイル名	編集内容
style.css	スタイルシート
javascript.js	jQuery

FTPソフトなどでファイルを編集してもいいですし、WordPressの管理画面からも編集できます。

「外観」→「テーマエディタ」→「style.css」「javascript.js」

他のテーマを使っている場合でも、スタイルシートやJavaScriptが追加できるようになっていると思うので探してみてください。

ちなみにこのようにカスタマイズをする場合には子テーマを作るのをオススメします。

バックアップは忘れずに！

ファイルを編集する時には万が一のことを考えてバックアップを取っておきましょう。

バックアップのプラグインを使うと自動でバックアップをやってくれるので便利です。

簡単に済ませるなら編集するファイルの中身をメモ帳などにコピーしておくのでもOK。

スタイルシートとJavaScriptを用意する

それではスタイルシートとJavaScriptを書いていきましょう。

最初はスタイルシートです。以下のコードをスタイルシートのファイル（Cocoonではstyle.css）に追加します。

/* クリックすると行の色が変わるテーブル */
.selected {
	background-color: #f07f00 !important; //ここで色を設定
}

/* 表の上でマウスカーソルをポインタに変更する */
.high-light-row table tr:hover {
	cursor: pointer;
}

次はJavaScriptです。

JavaScriptを記述するファイル（Cocoonの場合はjavascript.js）に以下の内容を追加してください。

$('.high-light-row table tr').click(function(){
	if ($(this).hasClass("selected")) {
		$(this).removeClass("selected");
	} else {
		$(this).addClass("selected");		
	}
})

これで準備が整いました。次からは実際に表（テーブル）を作っていきましょう。