jQuery-Mise en surbrillance des lignes de tableau dans Chrome

Question

Je travaille sur la création d'un rapport tabulaire de certaines informations sur un site Web. Cette table est assez large, donc j'aimerais ajouter une bordure 4px à chaque ligne du vol stationnaire en utilisant jQuery. Voici mon script:

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

Cela fonctionne exactement comme il se doit dans Firefox. Toutefois, dans Chrome, il fonctionne correctement pour les premières lignes, mais il commence à "laisser derrière" une partie de la couleur de bordure sur les lignes précédemment planifiées.

Je suis sur un Mac en utilisant Chrome 15.0.874.106. Voici un exemple de jsFiddle: http://jsfiddle.net/D6eKE/1/

Y a-t-il quelque chose que je puisse faire pour améliorer le fonctionnement de Chrome? Merci de votre aide!

Answer 1

On dirait que vous êtes assez proche, alors essayez d'ajouter le sélecteur ID:

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

Vous pouvez également utiliser le plug-in columnHover:

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

Enfin, vous pouvez aussi y arriver avec quelques CSS simple:

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

Answer 2

Je crois que vous devez utiliser le .each() pour appliquer la fonction à tous les éléments retournés par le sélecteur jQuery $ ('tr'). Cela va itérer sur le tableau d'objets renvoyé par jQuery et appliquer l'action désirée à chacun d'entre eux, tr tag dans ce cas. Quelque chose comme

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