2010-01-02 4 views
1

나는 성공적으로 jquery 홀수/짝수 선택기를 사용하여 테이블에 "호랑이 줄무늬"를 만듭니다. 그런 다음 행을 추가하거나 삭제할 수있는 기능을 추가했습니다. 그러나 나는 행 추가/삭제에 제대로 작동하도록 스트라이프를 가져올 수 없었습니다. 그것은 add/append에서 작동하지만 add/prepend 나 delete에서는 작동하지 않습니다. Jquery 홀수/짝수 질문 prepend/append 함께

function StripeRows() 
{ 
    $("#myTable").each(function(){ 
     $(this).find("tr").removeClass('evenrow oddrow'); 
     $(this).find("tr:even").addClass("evenrow"); 
     $(this).find("tr:odd").addClass("oddrow"); 
    }); 
} 

그렇지 않으면 둘 다 evenrowoddrow 수업을 행 될 겁니다 : 여기에 먼저 이전 스트라이핑을 취소하는 데 필요한 코드의 요약 ...

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

답변

0

이다.

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"클래스를 추가 . 여전히 oddrow/evenrow (이럴 단지 여분의 불필요한 코드를 추가)하려면

, 그것은 변화의 많은 부분이 아니다 :

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

브릴리언트! 감사. – rshid

0

은 아마 당신이 먼저 시도해야?

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