ホバーハイライト付きストライプテーブルを作りながら考えたこと
http://d.hatena.ne.jp/monja415/20110905/p1 を読んでいて、最近JavaScriptで似たようなことしたなぁと思ったので覚え書き。
/*--- main ---*/
神が生み出し至高の存在『jQuery』:
http://d.hatena.ne.jp/monja415/20110905/p1 のようにCSSのセレクタでストライプを当ててしまうのも手ですが、nth-child(even) とかはCSS3のセレクタなので、IE6,7では動きません（IE8も？手元に環境が無いので未検証）
jQueryでストライプテーブル:
先のストライプテーブル（縞々表）をjQueryで実現してみました。
.odd { background:#aaaaaa; }
.even { background:#f2f2f2 }
$(function(){
$("tr:nth-child(odd)").addClass("odd");
$("tr:nth-child(even)").addClass("even");
});
見た目はCSSだけで書くのと変わりませんが、IE6以上の全てのブラウザで動くCSS3セレクタを使ったコードが出来ました。
【おまけ】jQueryでホバーした行のハイライト表示:
こんな感じでマウスを置いている行をハイライト表示してみたいと思います。
.hover { background: #b2d8ff; }
$(function(){
$("tr:not(:first-child").mouseover(function(){
$(this).addClass("hover");
}).mouseout(function(){
$(this).removeClass("hover");
});
はい、できました。ちゃんちゃん。
まとめ:
例えば、後者のハイライト表示とか、CSSでその気になれば、
tr:not:(first-child):hover{ background: #B2D8FF; }
の一行で済むのですが、動作するブラウザが限られてしまうし、それを気にし出したら何種類もの記述に気を遣って、それがまたバグの原因になったりします。
だったら面倒くさい部分はjQueryという土管を通して使う癖をつけておいた方が無難でしょう。
「スマフォウェブ作ってるから関係ない」というのも確かにその通りなんですが、いつそのコードをPC用ウェブに転用するかも分からないから再利用性は高くしておいた方がやっぱり無難でしょう。
あと今後暫くはこっちが主流になりそうなので、そう書く癖をつけておくのも意味があると思います。
あと、jQueryは普通に使っている分にはただのエレガントなライブラリなのですが、実際は多分やばいくらいの泥臭い仕事の上に成り立っている職人的なライブラリだと思います（クロスブラウザ対応とか特に）。
その職人的凄さを全く感じさせずに、世界中で一番使われているライブラリに上り詰めるってかっこいいですね。エンジニアにしか分からないエンジニアリングよりも一番かっこいいですね。
そんなjQueryの設計にとても興味があるので、もし興味ある人が居たら、ぜひ一緒にjQueryライブラリのコードリーディングでもしましょう！あ、Backborn.js や Angular.js でも可です^^
※折角なので今回書いたコードをDropboxサーバの公開部分に置いておきます。CSSもJavascriptも全て一個のHTMLファイルに埋め込んであるので煮るなり焼くなりご自由にどうぞ。
http://dl.dropbox.com/u/3431516/sandbox/stripeTable.html
