javascriptで行を追加しながら行の色分け

質問

jQueryでボタンを押すと行が追加・削除されるようにしています。
var data;
jQuery(function(){
jQuery('#add').click(function(){
var len = $("#tbl tbody").children().length;
if(len>19){
$("#add").attr("disabled","disabed");
}
data = '<tr><td>' + (len+1) + '</td><td><textarea name="clmn' + (len+1) + '" cols="30" rows="10"></textarea></td><td><img src="/images/noimage.gif" alt="img' + (len+1) + '" /></td><td><input type="file" name="image' + (len+1) + '" /></td></tr>';
jQuery('#tbl').append(data);
});
jQuery('#del_bottom').click(function(){
if (jQuery('tbody tr').length) {
jQuery('tbody tr:last').remove();
}
});
});

ここで偶数行と奇数行の色を変化させようと
$(document).ready(function(){
$("table").each(function(){
jQuery(this).find("tr:even").addClass("even");
});
$("table").each(function(){
jQuery(this).find("tr:odd").addClass("odd");
});
});
というスクリプトを用意しましたが、
同時に動かそうとしても動きません。
何か方法は無いでしょうか？
初期状態では色分けをされていますが、追加した段階で追加された行には適応されません。
詳しいかた教えていただけるでしょうか？

回答No.3

kamepanman · ベストアンサー

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

を定義して、色をつけたいタイミングで

rowBgcolor();

を呼び出してみてはどうでしょうか？

回答No.2

fujillin

$(document).ready(function(){　・・・・
だと、初期表示状態のテーブルに対して処理するだけなので、後から追加した行には影響しません。

対応方法1
クラス指定をしているだけのようなので、後から追加する行に先にクラスを指定しておくようにする。

対応方法2
行を追加したら、奇/遇のクラス指定を行なう処理を再度実行する。
（行によって奇/遇が変わる場合は、1回クラス設定を削除する必要があるかも）

対応方法3
既に#1の回答にあるとおり、CSSで奇遇を書き分ける。（古いブラウザだと対応していないものがあるかも）

回答No.1

yambejp

モダンブラウザが対象ならcssでやるほうが楽では？