ie8 얼룩말 테이블 행과 호버

Question

다음 작업을 수행하는 더 좋은 방법이 필요합니다. 10 행 이후의 성능이 저하되어 사용할 수 없게됩니다. 100 이상에서는 브라우저가 잠겨 있습니다.

이것은 인트라넷 ie8 enviro이므로 ie8에서 작동해야합니다.

$('table.vgrid tr.xodd').hover(
    function(){ 
     $(this).removeClass('xodd'); 
     $(this).addClass('rowhover');   
    } 
    , 
    function(){    
     if ($(this).attr("class")=='rowhover') 
     { 
      $(this).removeClass('rowhover'); 
      $(this).addClass('xodd'); 
     } 
    } 
); 
$('table.vgrid tr.xeven').hover(
    function(){ 
     $(this).removeClass('xeven'); 
     $(this).addClass('rowhover');   
    } 
    , 
    function(){ 
     if ($(this).attr("class")=='rowhover') 
     { 
      $(this).removeClass('rowhover'); 
      $(this).addClass('xeven'); 
     } 
    } 
); 

html은 테이블에 vgrid 클래스가 있고 tr 행이 번갈아 나타날 수 있습니다.

몇 가지 방법을 시도해 보았습니다. 모두 끔찍하게 수행합니다. 얼룩말 효과 이상으로, 다른 JS 키잉으로 현재 클래스를 키워야하므로, 클래스를 사용하는 것은 사이트의 절반을 다시 코딩해야한다는 두려움 때문에 경계선입니다.

제안 사항?

Answer 1

기존 클래스를 제거해야 할 충분한 이유가 있는지 의심 스럽습니다. .rowhover의 스타일이 .xeven 및 .xodd의 스타일 뒤에 나열되도록 CSS를 설정하면 자연히 덮어 쓰기합니다.

그런 다음, 당신이해야 모두가 rowhover 클래스 .toggleClass입니다 :

$('.vgrid tr').on('mouseenter mouseleave', function() { 
    $(this).toggleClass('rowhover'); 
}); 

http://jsfiddle.net/mblase75/JJ2qJ/1/

---

그러나 더 나은의 순수 CSS 방식 거기에 다음 :hover pseudoclass를 사용. 다시 한 번, :hover 스타일을 다른 .xeven 및 .xodd 스타일 이후에 재정 의하여 재정렬 할 수 있도록 나열하십시오.

(대신 tr 자체의 tr:hover td 아이들에게 특정 스타일을 적용해야 할 수도 있습니다 그것을 시도하고 가장 적합한 참조하십시오.).

예 : http://jsfiddle.net/mblase75/JJ2qJ/

.vgrid .xeven { 
    background-color: #999; 
} 
.vgrid .xodd { 
    background-color: #ddd; 
} 
.vgrid tr:hover { 
    background-color: #9ff; 
}