KANTENNA.COM

Solarized

HOME > WEBプログラム覚書 > JavaScriptでテーブルの行を交互に色分け

JavaScriptでテーブルの行を交互に色分け

HTMLにclass振って対応している場合、行の削除、挿入が頻繁にあると対応がとても面倒なのでJavaScriptを活用するとよい。

ググッてみたらたくさん出てきたので今さら感はありますがメモってことで。

サンプル

Javascript
  1.  <script language="javascript" type="text/javascript">
  2.  window.onload = TrColor;
  3.  function TrColor(){
  4.   var tr = document.getElementsByTagName("tr");
  5.   for(i=0; i<tr.length; i++){
  6.   if (i % 2 == 0) {
  7.   tr[i].style.backgroundColor = "E8E8E8";
  8.   }
  9.   }
  10.  }
  11.  </script>
HTML
  1.  <table id="javaSample">
  2.   <tfoot>
  3.   <tr>
  4.   <th>JavaScript</th>
  5.   <td>ジャバスクリプト</td>
  6.   </tr>
  7.  
  8.   <tr>
  9.   <th>ＰＨＰ</th>
  10.   <td>ピーエイチピー</td>
  11.   </tr>
  12.  
  13.   <tr>
  14.   <th>MySQL</th>
  15.   <td>マイエスキューエル</td>
  16.   </tr>
  17.  
  18.   <tr>
  19.   <th>ＸＭＬ</th>
  20.   <td>エックスエムエル</td>
  21.   </tr>
  22.   <tr>
  23.  
  24.   <th>CSS</th>
  25.   <td>シーエスエス</td>
  26.   </tr>
  27.   </tfoot>
  28.  </table>

実行結果

JavaScript ジャバスクリプト
ＰＨＰ ピーエイチピー
MySQL マイエスキューエル
ＸＭＬ エックスエムエル
CSS シーエスエス

ページにテーブルが1つの場合はうまくいくが複数ある場合ずれてしまう。 trの取得の仕方をちょっと工夫する必要があるようだ。

改訂第5版 JavaScript ポケットリファレンス
作者:古籏 一浩 | 価格:￥ 2,499
投稿日 2007年9月18日 12:07
カテゴリ JavaScript
タグ インターフェイス | サンプルコード
トラックバック URL http://www.kantenna.com/cgi-bin/mt504/mt-tb.cgi/1089

トラックバック(1)

2009年1月 9日 13:18

JavaScriptでテーブルの行を交互に色分け[テーブル複数ある場合]WEBプログラム覚書

JavaScriptでtableが複数あっても大丈夫なテーブルの行を交互に色分け続きを読む

コメント

コメントする
Name
Email Address
URL
PAGE RANK
TIME LINE
2012
02.08

[Ubuntu11.10]Winows XPユーザーがUbuntuを使ってみて

Windows XPとUbuntuのデュアルブート環境にしてみておもったこと。

2012
02.03

[jQuery]closest()とparents()

今から16年前Netscapeブラウザのソースコードの公開方法の会議の中で、初めてオープンソースという言葉が使われた今日、 みなさんいかがお過ごしでしょうか。

今回の投稿はそれとは関係のないjQueryのparents()とclosest()が 似てたので何が違うのか試した時のメモです。

2012
02.01

[jQuery Mobile]初期化イベントメモ

jQuery Mobileは読み込まれてから

mobileinit -> pagebeforecreate -> pagecreate -> pageinit

の順番でイベントが発生する。

2012
02.01

[WordPress]管理画面のフッタのフィルタとアクション。

時間も時間なので、あまり使用頻度の高くない微妙なネタを。

会員制サイトなどで不特定多数の人にログインさせる場合、フッタのバージョン情報は隠しておきたかったり、 こじゃれたメッセージを表示したいときとか使うアクションとフィルタ。

2012
01.28

[WordPress] ブログの情報を取得する方法とノーキャッシュ疑惑

ブログのget_bloginfo()で取れないデータが必要な場合に使うもの。

2012
01.27

検索エンジンにやさしいパンくずリストのコーディング

ってなんだ。

2012
01.26

[jQuery Mobile]ダイアログ

jQuery Mobileにおけるダイアログの扱いはウインドウではなくページ。 なので通常のページと同様に扱える。ダイアログウインドウを出す。じゃなくダイアログページに遷移する。的な。

2012
01.25

[Ubuntu11.10]Ubuntuのインストール後の設定

インストール完了後の環境構築。PC起動時いちいちBIOSからブートドライブ選んで ブートするのかと思ってたら起動時にOS選択画面が出てくる。

すばらしいですね。

2012
01.24

[Ubuntu11.10]Windows XPとUbuntuのデュアルブート環境

いろいろあってUbuntuをインストールすることに。

2012
01.23

MinGW+Mintty+Git

MinGW+Mintty+Gitをやろうとして失敗に終わった。このエントリーには収穫できるものはありません。

Tags