jQueryでテーブルをシマシマに < ウェブ

2007年09月18日

jQueryでテーブルをシマシマに @ ウェブ

テーブルを行毎に背景色を変えてシマシマにしたい場合、昔のDreamweaverだったら「テーブルのフォーマット」コマンドを使えば一発だったのですが、今時、HTMLのbgcolorを使うのもどうかと思うので、Javascriptを使った場合を紹介します。

ゼロから書いても良いのですが、面倒なので、jQueryを使います。

先ずは、背景色の設定を行うCSS。

tr.even td {
background-color: #f3f3f3;
}

次にJavascirpt。

$(function(){
$("table tr:even").addClass("even");
});

これだけ。全体的なコードを書くと

<html>
<head>
<style type="text/css">
tr.even td {
background-color: #f3f3f3;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
$("table tr:even").addClass("even");
});
</script>
</head>
<body>
<table>
<tr>
<td>Lorem</td>
<td>ipsum</td>
</tr>
<tr>
<td>dolor</td>
<td>sit</td>
</tr>
</table>
</body>
</html>

こんな感じです。このままだとページの中にあるテーブル全部に影響するので、適当にクラスを定義するなりして対応してください。

ソースを見て分かるとおりに、bodyタグの中のHTMLにJavascriptが有りません。jQueryを使うとHTMLの部分を汚さないので、ソースが綺麗なままです。

Dreamweaver CS3だったら、spryを使うという手もありますけどね。XMLでデータを用意する必要がありますし、Javascriptが動かないブラウザで見た場合に、データが表示されないので、テーブルをシマシマ表示にしたいだけの理由でspryを使うのはお勧めできないです。

jQuery: The Write Less, Do More, JavaScript Library
>>関連リンク