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

Question

Est-ce que quelqu'un sait comment ajouter une bordure à une ligne de table avec une couleur d'arrière-plan différente lorsque la souris survole la ligne?

Je suis en mesure de changer la couleur de fond de la ligne avec ceci:

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

Mais je suis incapable d'ajouter une couleur de bordure. Je me rends compte que les bordures ne peuvent pas être directement appliquées à une balise de ligne de table, mais j'espère que quelqu'un connaîtra une magie voodoo jQuery capable de trouver les cellules de la ligne sélectionnée et d'appliquer des styles à celles-ci.

Merci!

Answer 1

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

Answer 2

Peut-être un bon point de départ:

http://www.devcurry.com/2009/02/change-table-border-color-on-hover_27.html

Answer 3

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

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

Alors vous serez réellement manipulerons chacune des couleurs de bordure td à la place. Une douleur, mais fonctionne assez bien quand vous l'avez compris.

Answer 4

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

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