【html】tableでの奇数行と偶数行の色分けについて

質問

【html】tableでの奇数行と偶数行の色分けについて

【html】tableでの奇数行と偶数行の色分けについて

現在tableの奇数行と偶数行を以下のように色分けしているのですが、
これだとrowspanを利用したとき、画像1のようにずれてしまいます。

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

この状態を画像2のようにしたいのですが、どのようにすれば出来るでしょうか？
よろしくお願いします。

※画像小さくてすみません。

回答No.2

nekomikekamo · ベストアンサー

作るとこんな感じでしょうか？
最後のif文で奇数偶数の判断ができますので、どちらでも対応できます。
$(document).ready(function(){
$("table").each(function(){
var finds =[];
var lineno = 0;
var rows = 1;
var index = jQuery(this).find('tr > :first-child');
for(var i=0;i<index.length;i+=1){
if(!finds[i]){
rows = index[i].rowSpan;
if (rows > 1) {
for (var row = i; row < (i+rows); row += 1) {
finds.push({i:row,type:lineno % 2});
}
}else{
finds.push({i:i,type:lineno % 2});
}
lineno+= 1;
}
}
jQuery(this).find("tr").each(function(i,e){
if(finds[i].type===0){ //0:偶数,1:奇数
$(e).addClass("even");
}
});
});
});

回答No.1

x_lady007

こちらを利用するのが手っ取り早いかと思います。

http://www.yomotsu.net/lab/javascripts/stripedtable