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
>>関連リンク
関連日記
- 2008年02月21日 テキストエリアの自動拡張 (5617)@ ウェブ
- 2007年09月14日 jQuery BlockUI Plugin (4850)@ ウェブ
- 2008年02月21日 テキストエリアのリサイズ (4692)@ ウェブ
- 2007年11月13日 spryを使った選択フォームがIEで動かない (4170)@ Windows
- 2009年12月10日 jQuery API extension for Dreamweaver (4016)@ Mac
- 2007年09月05日 気になるJavaScriptライブラリー (2983)@ ウェブ
- 2007年09月12日 気になるJavaScriptフレームワーク (2906)@ ウェブ
- 2007年09月16日 Ajax (2867)@ ウェブ
- 2008年03月08日 jQueryでグラフ描画 (2813)@ ウェブ
- 2007年09月11日 jQuery 1.2 (2799)@ ウェブ
- 2008年09月12日 ソニーグループ ポータルサイトが脱Flash (2716)@ Flash
- 2009年06月18日 SpriteMenu (2711)@ ウェブ
- 2008年05月12日 Processing.js (2639)@ ウェブ
- 2010年10月04日 smoothscroll.js (2598)@ ウェブ
- 2007年09月17日 jQuery UI (2568)@ ウェブ
- 2007年03月22日 Web Designing 2007年 04月号 (2523)@ ウェブ
- 2007年09月14日 Protoscript (2457)@ ウェブ
- 2008年03月25日 NHKオンライン (2456)@ ウェブ
- 2008年12月11日 Google AJAX Libraries API (2415)@ ウェブ
- 2009年01月15日 jQuery 1.3 (2311)@ ウェブ
- 2007年09月16日 jQuery 1.2 リファレンス (2294)@ ウェブ
- 2009年05月14日 ウェブページでコナミコマンド (2234)@ ウェブ
- 2011年10月04日 Adobe Fireworks CSS3 Mobile Pack (2172)@ Mac
- 2010年10月27日 Adobe MAX 2010 2日目 (2012)@ Flash
アマゾン広告
この日記ページは閲覧数などの条件に応じて、閲覧制限を行っています。他からリンクしていただいても、そのリンクから辿った閲覧者が当ページの内容をご覧頂けない場合があります。ご了承下さい。