带前置/append 的 Jquery 奇数/偶数问题

Question

我成功地使用jquery奇数/偶数选择器创建了一个“老虎条纹”一张 table 。然后我添加了添加或删除行的功能。然而我还没有去过能够在添加/删除行时使 strip 化正常工作。它适用于添加/追加，但不适用于添加/前置或删除。这是代码摘要...

$(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

它不起作用可能是因为您没有删除旧类。

我有两条建议:

1. 请勿使用 :even 和 :odd。这些通常不会按照您的预期运行。而是分别使用 :nth-child(even) 和 :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");
}