１行間隔でストライプとか、何行おきかで線が引いてあるTableをたまに見ますが、
いちいちclass追加してると面倒なのでjavacript使った方が早いよね。
っていうことでそういう感じのことをするスクリプトのサンプル。
左：１行間隔でセルの背景色変える
右：３行間隔で線を引く
背景色変えるだけなら非常に簡単です。
数字を変えて試してみてください。
//クラスを追加する間隔
var Skip =2;
//スタートする場所
var Start =1;
//要素のID
var tableid =”stripes”;
window.onload = function() {
if(document.getElementById(tableid)) {
var table = document.getElementById(tableid);
if(!table) return false;
var rows = table.getElementsByTagName(‘tr’);
for(var i = 0; i < rows.length; i++){
if((i+Start) % Skip == 0 ){
rows[i].className = 'zebra';
}
}
}
}
[/js]
getElementsByTagName('tr')を変えればid="stripe"のulにあるリスト要素だけとかにも使えます
でもこれだとtrにクラス追加してるから線は引けないんで、
線が引きたいならthやthにクラスを追加しなければならない。
サンプル右側のテーブルはこちらのスクリプトです
[js]
//クラスを追加する間隔
var Skip2 =3;
//スタートする場所
var Start2 =1;
//要素のID
var tableid2 ="stripes2";
window.onload = function() {
if(document.getElementById(tableid2)) {
var table =document.getElementById(tableid2)
var rows = table.getElementsByTagName('tr');
for(var j = 0; j < rows.length; j++){
if((j+Start2) % Skip2 == 0){
var el =rows[j].childNodes;
for(var n = 0; n < el.length; n++){
el[n].className = 'zebra2';
}
}
}
}
}[/js]
セルがいくつあっても勝手にclassを追加するのでかなり楽。
[css]
.zebra {
background-color: #333;
color: #ccc;
}
.zebra2 {
border-bottom:dotted 1px #666;
}[/css]
border使うときborder-collapseしてると表示されなくなるので注意。