jQuery Girl
  1. jQuery Girl
  3. mettre en évidence la ligne du tableau
Intereting Posts
Comment mettre en pause un événement de soumission jusqu’à la fin d’un événement AJAX? Obtenir ‘ne peut pas lire la propriété’ hors largeur ‘d’un bootstrap non défini Comment changer l’opacité de l’image en survol à l’aide de css Erreur non capturée: erreur lors de l’appel de la méthode sur NPObject Le plugin ne se charge pas appendTo () animation Est-il possible de désactiver Javascript / Jquery à partir de la console de l’inspecteur du navigateur? JavaScript ce de jQuery this jQuery outerWidth sur un élément parent qui a des éléments enfants avec un remplissage Détecter l’événement de clic de l’URL Bar ou l’utilisateur en tapant dans la barre d’adresse du navigateur avec Jquery / java-script changer les classes à l’intérieur d’un élément survolé Yii2 Comment empêcher le chargement automatique de assetsbundle sur un widget? Le fichier ajQ load () de jQuery ne fonctionne pas dans localhost – (exemple de tutoriel pour w3scools.com jQuery AJAX) Foreach Ajax Json – Jquery Comment changer le caractère d’entrée contenteditable, sur la touche

mettre en évidence la ligne du tableau

J’ai la structure de table suivante 

  
 Lorem Ipsum Fierent 
 
 Lorem ipsum pro ut tale erant mnesarchum ne 
 
 mnesarchum ne  sapientem fierent mnesarchum

Maintenant, je veux mettre en évidence la ligne, sur quelle souris est en vol stationnaire? Donc, j’ai 2 questions:

  1. Comment puis-je obtenir un effet de surbrillance sur la structure de table mentionnée ci-dessus?
  2. Comment puis-je rétablir l’effet de surbrillance lorsque les lignes ne sont pas déplacées au-dessus de celui-ci?

J’utilise jQuery 1.4+, alors suggérez-moi un moyen d’atteindre les objectives suivants en utilisant le code jQuery.

J’ai créer jsfiddle pour le même: http://jsfiddle.net/c9h5w/

Merci.

J’appendais un nom de classe à la ligne actuellement survolée. Vous pouvez ensuite utiliser CSS pour styliser chaque cellule de cette ligne avec une certaine couleur d’arrière-plan, par exemple. Supprimer le style consiste simplement à déclencher un événement mouseout et à supprimer le nom de classe.

CSS: 

 .hovered td { background: #ddd; }

JavaScript: 

 $('table tr').mouseover(function() { $(this).addClass('hovered'); }).mouseout(function() { $(this).removeClass('hovered'); });

Exemple en direct .

Vérifiez-le: 

 $("table tr").hover( function(){ $(this).css("background-color","#FFEFC6"); //$(this).addClass('className'); //if ur working with class }, function(){ $(this).css("background-color",""); //$(this).removeClass('className'); //if ur working with class } );

CLIQUEZ ICI POUR VOIR LA DÉMO