Jquery奇/偶问题有prepend/append

rsh*_*hid 1 jquery append css-selectors prepend

我成功地使用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");
    });
}
Run Code Online (Sandbox Code Playgroud)

cle*_*tus 5

它不起作用可能是因为你没有删除旧班.

我有两条建议:

  1. 不要使用:even:odd.这些通常不会表现出您的期望.而是分别使用:nth-child(even):nth-child(odd); 和
  2. 没有偶数和奇数类.你不需要它们.只需使用一个奇数(或偶数)类,并使表的样式覆盖另一种情况.

所以你应该做这样的事情:

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

此函数从表中的所有行中删除"oddrow"类,然后将"oddrow"类添加到表中的奇数行.

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

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