テーブルのセルの色をページ構築後に着色する

動作ブラウザ
Internet Explorer Netscape Navigator
4.0x 4.5 5.0x 5.5 6.0 4.x 6.0
Windows - × ×
Macintosh - - × ×
UNIX - - - - - × ×

解  説  テーブルのセルの色をページ構築後に着色するにはテーブルのセルのスタイルシートのbackgroundColorプロパティにカラー名またはカラーコードを代入します。行のデータはrowsに、列のデータはcellsに格納されています。サンプルでは市松模様になるようにしていますが、セルの横と縦の位置から論理積と排他的論理和を使って表示する色を求めます。
コード <html> <head> <title>テーブルのセルの色をページ構築後に着色する</title> <script language="JavaScript"><!-- function setColor(tName) { tObj = document.all[tName]; col = ["#FFFF00","#FFC080","#FFFF00","#FFC080"]; for (i=0; i<tObj.rows.length; i++) for (j=0; j<tObj.rows[i].cells.length; j++) tObj.rows[i].cells[j].style.backgroundColor = col[(i & 1) ^ (j & 1)]; } // --></script> </head> <body onLoad="setColor('myTBL1')"> <table id="myTBL1" border="1"> <tr><td>分類1</td><td>分類2</td><td>分類3</td><td>分類4</td></tr> <tr><td>春</td><td>夏</td><td>秋</td><td>冬</td></tr> <tr><td>Spring</td><td>Summer</td><td>Autumn</td><td>Winter</td></tr> </table> </body> </html>

■サンプルスクリプトを実行する >>実行
■各ブラウザでの動作結果を見る >>View!