jQuery - выделение строк таблицы в Chrome

Question

Я работаю над созданием табличного отчета с некоторой информацией на веб-сайте.Эта таблица довольно широка, поэтому я хотел бы добавить границу 4px к каждой строке при наведении курсора с помощью jQuery.Вот мой скрипт:

$(function() {
    $('tr').hover(function() {
        $(this).contents('td').css({'border-top':'4px solid #934739', 'border-bottom':'4px solid #934739'});
    },
    function() {
        $(this).contents('td').css({'border-top':'1px solid #000','border-bottom':'1px solid #000'});
    });
});

Он работает точно так же, как и в Firefox.Тем не менее, в Chrome он отлично работает для первых нескольких рядов, но затем начинает «оставлять позади» часть цвета границы в ранее наведенных рядах.

Я на Mac с Chrome 15.0.874.106.Вот пример jsFiddle: http://jsfiddle.net/D6eKE/1/

Могу ли я что-нибудь сделать, чтобы эта работа стала лучше в Chrome?Спасибо за вашу помощь!

Answer 1

Похоже, вы довольно близки, поэтому попробуйте добавить селектор идентификатора:

$(function(){
    $("#tableid tr").hover(
        function(){
            $(this).addClass("highlight");
        },
        function(){
            $(this).removeClass("highlight");
        }
    );
});

Вы также можете использовать плагин columnHover :

$(document).ready(function(){
    $("#tableid").columnHover({ hoverClass: "highlight" });
});

Наконец, вы можете сделать это с помощью простого CSS:

#tableid tr:hover {
  background-color: #f8f8f8;
}

Answer 2

Полагаю, вам нужно использовать .each (), чтобы применить функцию ко всем возвращаемым элементам с помощью селектора jQuery $ ('tr'). Это будет повторять массив объектов, возвращаемый jQuery, и применять желаемое действие к каждому из них, в данном случае к тегу tr. Что-то вроде

$(function(){
    $('tr').hover(function() {
        $(this).css({'border-top':'4px solid #934739', 'border-bottom':'4px solid #934739'});
        },
        function() {
            $(this).css({'border-top':'1px solid #000', 'border-bottom':'1px solid #000'});
        });
});