ie8 строки таблицы зебры и зависание

Question

Мне нужен лучший способ сделать следующее. Производительность после 10 строк просто ухудшается до непригодности. при 100+ браузер просто блокируется.

это интранет, то есть 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

Я сомневаюсь, что есть хорошая причина для удаления существующих классов. Если вы настроили свой CSS так, чтобы были указаны стили для .rowhover ПОСЛЕ тех, которые для .xeven и .xodd, они, естественно, будут отменены.

Тогда все, что вам нужно сделать, это .toggleClassrowhover класс:

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

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

---

Но есть чисто CSS подход, даже лучше: использовать :hover pseudoclass. Опять же, перечислите эти :hover стилей ПОСЛЕ других .xeven и .xodd стилей, чтобы они переопределили.

(Вы, возможно, потребуется применить определенные стили к tr:hover td детей вместо самого tr попробовать и посмотреть, что работает лучше всего.).

Пример: http://jsfiddle.net/mblase75/JJ2qJ/

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