带有前置/附加的jQuery奇数/偶数问题答案

【问题标题】：Jquery odd/even question with prepend/append带有前置/附加的jQuery奇数/偶数问题
【发布时间】：2010-12-31 17:05:27
【问题描述】：

我成功地使用 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");
    });
}

【问题讨论】：

标签： jquery css-selectors append prepend

【解决方案1】：

您需要先清除之前的分条：

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 类的行。

【讨论】：

【解决方案2】：

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

我有两条建议：

不要使用:even 和:odd。这些通常不符合您的预期。而是分别使用:nth-child(even) 和:nth-child(odd)；和
不要同时具有偶数和奇数类。你不需要他们两个。只需使用奇数（或偶数）类，并让表格的样式覆盖其他情况。

所以你应该这样做：

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");
}

【讨论】：

【解决方案3】：

也许你应该先试试这个？

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

【讨论】：