Ajoute la couleur d'arrière-plan et la bordure à la ligne du tableau lors du survol à l'aide de jquery

Personne ne sait d'une manière d'ajouter une bordure à une ligne de tableau avec une couleur de fond différente lorsque la souris passe sur la ligne?

J'ai été en mesure de modifier la couleur de fond de la ligne:

$(document).ready(function() {
   $(function() {
        $('.actionRow').hover(function() {
            $(this).css('background-color', '#FFFF99');
        },
        function() {
            $(this).css('background-color', '#FFFFFF');
        });
    });
});

Mais je n'arrive pas à ajouter une bordure de couleur. Je me rends compte frontières ne peuvent pas être directement appliquée à une ligne de la table de marque, mais je suis en espérant que quelqu'un sait quelque jQuery magie vaudou qui peut trouver les cellules d'un tableau à l'intérieur de la ligne sélectionnée et appliquer des styles à ceux à créer de la frontière.

Merci!

source d'informationauteur Chris Conway

  1. 31
       $(function() {
        $('tr').hover(function() {
            $(this).css('background-color', '#FFFF99');
            $(this).contents('td').css({'border': '1px solid red', 'border-left': 'none', 'border-right': 'none'});
            $(this).contents('td:first').css('border-left', '1px solid red');
            $(this).contents('td:last').css('border-right', '1px solid red');
        },
        function() {
            $(this).css('background-color', '#FFFFFF');
            $(this).contents('td').css('border', 'none');
        });
    });
  2. 4

    Votre meilleur pari serait de addClass et removeClass sur la ligne.
    Ensuite, dans votre feuille de style:

    .actionRow-hovered td { border-color: whatever; }

    De sorte que vous aurez en fait être la manipulation de chacun des td couleurs de bordure de la place.
    Une douleur, mais fonctionne assez bien quand vous obtenez le coup de lui.

  3. 1
    $('table.tblMenuTabls tr').hover(function(){
        $(this).toggleClass('tblOverRow');
        },function(){
            $(this).toggleClass('tblOverRow')}
    ).css({cursor: 'hand'});

    Où tblMenuTabls est la table nom de la classe et tblOverRow est de classe CSS avec hover définition.