[JS]Table内セルを自動的にストライプにする

1行間隔でストライプとか、何行おきかで線が引いてあるTableをたまに見ますが、
いちいちclass追加してると面倒なのでjavacript使った方が早いよね。
っていうことでそういう感じのことをするスクリプトのサンプル。

左:1行間隔でセルの背景色変える
右:3行間隔で線を引く

背景色変えるだけなら非常に簡単です。
数字を変えて試してみてください。

//クラスを追加する間隔
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してると表示されなくなるので注意。

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください