ソースコード

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 みたいなのを自分で作る必要がありそうです。

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

1
2
3
4

 ブラウザで確認するとスペースになる。
 ブラウザで確認するとスペースになる。
 ブラウザで確認するとスペースになる。
 ブラウザで確認するとスペースになる。

上記のHTMLソースは以下のようになっていますよ。

1
2
3
4

 ブラウザで確認するとスペースになる。
 ブラウザで確認するとスペースになる。
 ブラウザで確認するとスペースになる。
 ブラウザで確認するとスペースになる。

これの良いところ基本編は All about に書いてありますので、そちらを参考にしてください。ここでは良いところ応用編を説明します。

空白文字が使える場面

私が今日体験したことなんですけど、Table でカレンダーを作るときとか、表を作るとき、background でカラーを設定して、table に cellspacing=”1″ を入れることによって、td と td の間に線を入れている(正確には隙間から背景色が見えるだけ)場合であれば問題ないのですが、border を使ってカレンダーや表を作っているときであると、td に何も入力されていない場合、IE6 および IE7 では border が出てこなくなります。そういうときに何も入力されていない td に空白文字を含めると、IE シリーズでも border を表示させることができますよ。

1
2
3
4
5

<form method="post">
<table>
<tr><th>名前</th><td><input type="text" name="yourname" size="28" value="" /></td></tr>
<tr><th>メールアドレス</th><td><input type="text" name="youraddress" size="28" value="" /></td></tr>
<tr><th>お問い合わせ内容</th><td><textarea name="contact" cols="30" rows="10">

これは問題の無い場合です。しかし以下のようになると問題が発生します。問題が発生するというか、本来これは間違った書き方になるので問題が発生するしないに関わらずダメなんですが、通常どのブラウザでも問題なく表示されてしまうのでミスだということに気付けません。

1
2
3
4
5
6

<table>
<tr><th>名前</th><td><form method="post"><input type="text" name="yourname" size="28" value="" /></td></tr>
<tr><th>メールアドレス</th><td><input type="text" name="youraddress" size="28" value="" /></td></tr>
<tr><th>お問い合わせ内容</th><td><textarea name="contact" cols="30" rows="10"></textarea><br />
<input type="submit" value="メール送信" /><input type="reset" value="クリア" /></form></td></tr>
</table>

しかし、上記のような間違った書き方をしているファイルを、Ajax.Updater で部分的に更新させるために別で読み込もうとすると IE Chrome Opera Safari などのブラウザでは問題なく表示されますが、Firefox ではレイアウトが崩壊するようになります。おそらく CSS が上手く適用されなくなるのが原因だと思われますがあくまで推測です。Firefox は真面目で本当に良い奴ですね。

Firefox にバグがあるわけではなく、Firefox が Ajax に上手く対応できていないわけではなく、自分が間違っているので　Firefox に怒らないでください。私は(Firefox にもバグあるじゃないか！と)怒ってしまったので後悔しています……。