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

| 2007年09月18日 12:07

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

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

サンプル


<script language="javascript" type="text/javascript">
	window.onload = TrColor;
	function TrColor(){
		var tr = document.getElementsByTagName("tr");
		for(i=0; i<tr.length; i++){
			// 偶数の時
			if (i % 2 == 0) {
				tr[i].style.backgroundColor = "E8E8E8";
			}
		}
	}
</script>

<table id="javaSample">
<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>

実行結果

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

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

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

トラックバック
  • http://www.kantenna.com/cgi-bin/mt/mt-tb.cgi/157
コメントを投稿

(いままで、ここでコメントしたことがないときは、コメントを表示する前にこのブログのオーナーの承認が必要になることがあります。承認されるまではコメントは表示されません。そのときはしばらく待ってください。)





この情報を登録しますか?

このサイトは次のライセンスで保護されています。

Creative Commons License

Kantenna by Kantenna_Admin is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 2.1 Japan License.
IT業界、エンジニア関連の求人
Web業界に精通したエージェントなので、希望に合った仕事、プロジェクト、雇用形態を紹介してくれてしっかりと転職活動をサポートしてくれます。
初心者のみ採用！【スノーグラス】ＷＥＢ系エンジニア募集
初心者のみのweb系エンジニア求人!なんでだ?そろそろ転職考えてるのでここ行ってみようかな・・・
Twitter Updates