[jQuery] Table の偶数行の背景色を変更しオンマウスで行をマークする記述

探せばそこら中にあると思いますが、私も作ってみましたよ。
詳しい方書き方とか改行の位置とか問題ないかアドバイス頂けたら幸いです。

ソースコード

1
2
3
4
5
6
7
8
9
10
11
12
13

$(function(){
	$("table").each(function(){
		$(this).find("tr:even").addClass("even");
	});
	$("tr").hover(
		function() {
			$(this).addClass("hover");
		},
		function() {
			$(this).removeClass("hover");
		}
	);
});

修正(2009/10/8): 1行目を改良しました。

$(document).ready(function()は
$(function()に略せますよ～（内容は全く同じ）。

ありがとうございます！ということで、さっそく修正しました。

実行結果

このソースを実行するとテーブルがこんな風になります。

コードの解説

1行目

最初に起動しますよーって奴です。これで良いのでしょうか。この段階でまだまだ勉強が足りませんね。

2行目から4行目

ページ内の table の tr の偶数行に class=”even” を設定します。これにより、CSS で .even に対して背景色を設定しておけば楽しいことになりますよ。

5行目~12行目

マウスオーバーで class=”hover” を追加します。CSS で .hover に変化を書いておけば、マウスオーバーでその行をマークできます。ちなみにマウスアウトをするとさ、class=”hover” を削除します。

まとめ

こんな感じですね。

何でもかんでもプラグインを使わなくても、こんな感じで自分で作っていった方が勉強にもなるし、後で融通が聞きます。ちなみにこのソース light box 2 と併用できない ( prottype.js 使ってるからね) みたいなので、light box 2 みたいなのを自分で作る必要がありそうです。

ちなみに本当は縦にもいろいろ小細工したいんですが、元々他のことやってて脱線してここまで来ちゃったんで、早く本来の目的を達成しなければいけないので、今日はこの辺りで。