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

这可能不起作用，可能是因为你没有删除旧班。

我有两条建议：

请勿使用:even和:odd。这些通常不会表现出您的期望。而是分别使用:nth-child(even)和:nth-child(odd);和
没有偶数和奇数类。你不需要它们。只需使用一个奇数（或偶数）类，并使表的样式覆盖另一个案例。

所以你应该这样做：

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

此函数从表中的所有行中删除“oddrow”类，然后将“oddrow”类添加到表中的奇数行。

如果你仍然想要奇数/偶数（imho只是增加了额外的不必要的代码），那就没有太大的改变了：

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();

Jquery奇/偶问题有prepend / append

3 个答案: