参考にしました
web,direction,planning,graphicdesign
2012年1月4日水曜日
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;
}
要検討
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 lines = table.getElementsByClassName(conf.childNodeName);
for(var j=0, llen=lines.length; 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
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;
}
登録:
投稿 (Atom)