2008年7月4日金曜日

JavaScript 1行おきに色をつける

1行おきに色を変えたい場合に単純に1行おきであれば簡単だが、ヘッダーが複数あり明細も複数行あった場合はそう単純にはいかないのでまとめてみようと思う。

まず、HTMLのbody部分にイベントを記載

<body onLoad="tableBgColor()">

明細を表示するtableタグの中のIDを id="ta1" と属性を指定します。
JavaScriptは下記の通り

function tableBgColor(){
var rows,rlen,rowsb;
//ta1は表示するテーブルタグ名
rows=ta1.rows;
rlen=rows.length;
for(num=0;num<rlen;num++){
//ヘッダー色の指定 numヘッダーセル行の色指定 今回は初め3行がヘッダー
if (num<3){
if (num==0){
rows[num].style.backgroundColor="white";
rows[num].style.color="black";
}else{
rows[num].style.backgroundColor="white";
rows[num].style.color="black";
}
//明細色のストライプ化 今回は1行置き num+1で複数行のストライプが可能
}else{
if(([num]/1)%2==0){
rows[num].style.backgroundColor="#DCDCDC"; //淡いグレー
rows[num].style.color="black";
}else{
rows[num].style.backgroundColor="white";
rows[num].style.color="black";
}
}
}
}

ポイントは[num]の部分が(num)として記載した場合IEでは作動するが、Firafoxでは作動しない。
IEの記述はかなりゆるいので手を抜きそうになるが、しっかりタグを書かなければあとで痛い目にあうことになるのであった。

0 件のコメント: