KANTENNA.COM

Solarized

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

JavaScriptでテーブルの行を交互に色分け[テーブル複数ある場合]

昨日のエントリーで書いてあるのはテーブルが複数あった場合、ページ内のtrを一まとめで取得するのでちょっと困ることがある。なんでテーブルが複数あってもテーブルごとにtrを取得するように変更。

また確認して気が付いたのだが背景色指定がFirefoxで利いてなかったのでクラス名を振ってCSSで背景色指定の方がよさそうだ。

Javascript
  1.  window.onload = TrColor;
  2.  function TrColor(){
  3.   // ページ内のテーブルを取得
  4.   var table = document.getElementsByTagName("table");
  5.   for(i=0; i<table.length; i++){
  6.   tr = table[i].getElementsByTagName("tr");
  7.   for(j=0; j<tr.length; j++){
  8.   // 偶数の時
  9.   if (j % 2 == 0) {
  10.   tr[j].className = "trColor";
  11.   }
  12.   }
  13.   }
  14.  }
HTML
  1.  <h5>サンプルテーブル</h5>
  2.  <table>
  3.   <tr>
  4.   <th>JavaScript</th>
  5.   <td>ジャバスクリプト</td>
  6.   </tr>
  7.   <tr>
  8.   <th>ＰＨＰ</th>
  9.   <td>ピーエイチピー</td>
  10.   </tr>
  11.   <tr>
  12.   <th>MySQL</th>
  13.   <td>マイエスキューエル</td>
  14.   </tr>
  15.   <tr>
  16.   <th>ＸＭＬ</th>
  17.   <td>エックスエムエル</td>
  18.   </tr>
  19.   <tr>
  20.   <th>CSS</th>
  21.   <td>シーエスエス</td>
  22.   </tr>
  23.  </table>
  24.  
  25.  <h5>サンプルテーブル2</h5>
  26.  <table>
  27.   <tr>
  28.   <th>JavaScript</th>
  29.   <td>ジャバスクリプト</td>
  30.   </tr>
  31.   <tr>
  32.   <th>ＰＨＰ</th>
  33.   <td>ピーエイチピー</td>
  34.   </tr>
  35.   <tr>
  36.   <th>MySQL</th>
  37.   <td>マイエスキューエル</td>
  38.   </tr>
  39.   <tr>
  40.   <th>ＸＭＬ</th>
  41.   <td>エックスエムエル</td>
  42.   </tr>
  43.   <tr>
  44.   <th>CSS</th>
  45.   <td>シーエスエス</td>
  46.  </tr>
  47.  </table>

実行結果

最初なぜかgetElementsByTagName()でtrが取得できなかったので回りくどいのを書いていた。これはこれで何かに使えそうなのでメモ

Javascript
  1.  function TrColor(){
  2.   // ページ内のテーブルを取得
  3.   var table = document.getElementsByTagName("table");
  4.   for(i=0; i<table.length; i++){
  5.   // テーブルにIDをセット
  6.   table[i].setAttribute("id", "tb" + i);
  7.   // IDでテーブル取得
  8.   tableAtt = document.getElementById("tb" + i);
  9.   // 取得したテーブルのtrを取得
  10.   tr = tableAtt.getElementsByTagName("tr");
  11.  
  12.   for(j=0; j<tr.length; j++){
  13.   // 偶数の時
  14.   if (j % 2 == 0) {
  15.   tr[j].className = "trColor";
  16.   }
  17.   }
  18.   }
  19.  }
JavaScriptパターン ―優れたアプリケーションのための作法
作者:Stoyan Stefanov | 価格:￥ 2,940
投稿日 2007年9月19日 12:59
カテゴリ JavaScript
タグ インターフェイス | サンプルコード
トラックバック URL http://www.kantenna.com/cgi-bin/mt504/mt-tb.cgi/1093

トラックバック(0)

コメント

コメントする
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