2007年09月18日

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

img1

テーブルを行毎に背景色を変えてシマシマにしたい場合、昔の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
>>関連リンク

閲覧数: 3826 / はてなブックマークusers

blog comments powered by Disqus

関連日記

アマゾン広告

この日記ページは閲覧数などの条件に応じて、閲覧制限を行っています。他からリンクしていただいても、そのリンクから辿った閲覧者が当ページの内容をご覧頂けない場合があります。ご了承下さい。

▼日記検索

Mac

Shade

3D

Flash

ゲーム

ウェブ

音楽

映画

デジカメ

Windows

Linux

携帯電話

テレビ

広島

電子工作

iOS

▼ 最近のトラックバック

▼ランキング

▼関連サイト