1

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

3 回答 3

5

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

我有两条建议：

  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");
}
于 2010-01-02T01:58:25.180 回答
0

您需要先清除之前的条带化：

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

于 2010-01-02T01:58:18.147 回答
0

也许你应该先试试这个？

$(this).find("tr").removeClass();
于 2010-01-02T01:59:24.583 回答