JavaScriptでテーブルの行を交互に色分け[テーブル複数ある場合]
パーマリンク | 2007年09月19日 12:59
昨日のエントリーで書いてあるのはテーブルが複数あった場合、ページ内のtrを一まとめで取得するのでちょっと困ることがある。なんでテーブルが複数あってもテーブルごとにtrを取得するように変更。
また確認して気が付いたのだが背景色指定がFirefoxで利いてなかったのでクラス名を振ってCSSで背景色指定の方がよさそうだ。
window.onload = TrColor;
function TrColor(){
// ページ内のテーブルを取得
var table = document.getElementsByTagName("table");
for(i=0; i<table.length; i++){
tr = table[i].getElementsByTagName("tr");
for(j=0; j<tr.length; j++){
// 偶数の時
if (j % 2 == 0) {
tr[j].className = "trColor";
}
}
}
}
<h5>サンプルテーブル</h5>
<table>
<tr>
<th>JavaScript</th>
<td>ジャバスクリプト</td>
</tr>
<tr>
<th>ＰＨＰ</th>
<td>ピーエイチピー</td>
</tr>
<tr>
<th>MySQL</th>
<td>マイエスキューエル</td>
</tr>
<tr>
<th>ＸＭＬ</th>
<td>エックスエムエル</td>
</tr>
<tr>
<th>CSS</th>
<td>シーエスエス</td>
</tr>
</table>
<h5>サンプルテーブル2</h5>
<table>
<tr>
<th>JavaScript</th>
<td>ジャバスクリプト</td>
</tr>
<tr>
<th>ＰＨＰ</th>
<td>ピーエイチピー</td>
</tr>
<tr>
<th>MySQL</th>
<td>マイエスキューエル</td>
</tr>
<tr>
<th>ＸＭＬ</th>
<td>エックスエムエル</td>
</tr>
<tr>
<th>CSS</th>
<td>シーエスエス</td>
</tr>
</table>
実行結果
最初なぜかgetElementsByTagName()でtrが取得できなかったので回りくどいのを書いていた。これはこれで何かに使えそうなのでメモ
function TrColor(){
// ページ内のテーブルを取得
var table = document.getElementsByTagName("table");
for(i=0; i<table.length; i++){
// テーブルにIDをセット
table[i].setAttribute("id", "tb" + i);
// IDでテーブル取得
tableAtt = document.getElementById("tb" + i);
// 取得したテーブルのtrを取得
tr = tableAtt.getElementsByTagName("tr");
for(j=0; j<tr.length; j++){
// 偶数の時
if (j % 2 == 0) {
tr[j].className = "trColor";
}
}
}
}
JavaScriptでテーブルの行を交互に色分け[テーブル複数ある場合]タグ:
トラックバック
- http://www.kantenna.com/cgi-bin/mt/mt-tb.cgi/158
最新更新ページ
- 2008/09/08sprintf()メモ
- 2008/09/05一定時間でsession終了メモ
- 2008/08/203ds MAX プラグイン Greeble
- 2008/08/13RSS 3Dデータ
- 2008/07/09PHP ファイルのオープンと読み込み
