こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

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");
});
});
というスクリプトを用意しましたが、
同時に動かそうとしても動きません。
何か方法は無いでしょうか?
初期状態では色分けをされていますが、追加した段階で追加された行には適応されません。
詳しいかた教えていただけるでしょうか?

投稿日時 - 2012-06-16 18:17:42

QNo.7536962

すぐに回答ほしいです

質問者が選んだベストアンサー

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

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

rowBgcolor();

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

投稿日時 - 2012-06-18 18:35:29

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(3)

ANo.2

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


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

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

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

投稿日時 - 2012-06-18 15:46:09

ANo.1

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

投稿日時 - 2012-06-17 20:58:04

あなたにオススメの質問