web,direction,planning,graphicdesign

2009年12月7日月曜日

tableを交互に色を変える

■ライブラリを使わない場合

要検討

window.onload = function(){
var conf = {
className : 'striped',
childNodeName : 'tr',
oddClassName : 'oddline',
evenClassName : 'evenline'
}
var tables = getElementsByClassName(conf.className);
for(var i=0, len=tables.length; i var table = tables[i];
var lines = table.getElementsByClassName(conf.childNodeName);
for(var j=0, llen=lines.length; j node = lines[j];
if(j%2==0){
node.className = conf.oddClassName;
}else{
node.className = conf.evenClassName;
}
}
}
};

// クラス名によるエレメントノード配列取得

function getElementsByClassName(name){
var elements =[];
var allElements = document.getElementsByTagName('*');
for(var i=0, len=allElements.length; i if(allElements[i].className ==name){
elements.push(allElements[i]);
}
}
return elements;
}





■jQueryを使った場合

//js

$(document).ready(function(){
$("table").each(function(){
jQuery(this).find("tr:odd").addClass("oddline");
});
});

//css

table .oddline{
background:#333;
}

フォロワー