jquery - 先頭に追加/追加するJqueryの奇数/偶数の質問

Question

jqueryの奇数/偶数セレクターを使用して、テーブルに「タイガーストライピング」を作成しています。次に、行を追加または削除する機能を追加しました。ただし、行の追加/削除時にストライピングを適切に機能させることができませんでした。追加/追加では機能しますが、追加/先頭または削除では機能しません。ここにコードの要約があります...

$(document).ready(function(){

    // click on Add Row button
    $("#addButton").click(function(){
        // add a row to table 
        addTableRow('#myTable');                        
        // then re-apply tiger striping
         stripeRows();
    });
}); 


// remove specified row
function removeRow(row) {
    $(row).parent("tr").remove();
    stripeRows();
}


function StripeRows()
{
    $("#myTable").each(function(){
        $(this).find("tr:even").addClass("evenrow");
        $(this).find("tr:odd").addClass("oddrow");
    });
}

Answer 1

古いクラスを削除していないため、おそらく機能していません。

2 つのアドバイスがあります。

1. :evenと を使用しないでください:odd。これらは通常、期待どおりに動作しません。代わりに:nth-child(even)and を:nth-child(odd)それぞれ使用します。と
2. 偶数クラスと奇数クラスの両方を持たないでください。両方とも必要ありません。奇数 (または偶数) クラスを使用し、テーブルのスタイルで他のケースをカバーするだけです。

したがって、次のようにする必要があります。

function StripeRows() {
  $("#mytable > tbody > tr").removeClass("oddrow")
    .filter(":nth-child(odd)").addClass("oddrow");
}

この関数は、テーブルのすべての行から「oddrow」クラスを削除してから、「oddrow」クラスをテーブルの奇数行に追加します。

それでも奇数行/偶数行が必要な場合（不要なコードを追加するだけです）、それほど大きな変更はありません。

function StripeRows() {
  $("#mytable > tbody > tr").removeClass("oddrow evenrow")
    .filter(":nth-child(odd)").addClass("oddrow")
    .end().filter(":nth-child(even)").addClass("evenrow");
}

Answer 2

最初に以前のストライピングをクリアする必要があります。

function StripeRows()
{
    $("#myTable").each(function(){
        $(this).find("tr").removeClass('evenrow oddrow');
        $(this).find("tr:even").addClass("evenrow");
        $(this).find("tr:odd").addClass("oddrow");
    });
}

evenrowそうしないと、とoddrowクラスの両方を持つ行になってしまいます。

Answer 3

まずはこれを試してみてはいかがでしょうか。

$(this).find("tr").removeClass();