Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1387 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  rollover sur toute une ligne et toute une colonne avec jquery

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

rollover sur toute une ligne et toute une colonne avec jquery

n°2103991
naeco
Buddy Rich Big Band
Posté le 29-09-2011 à 19:05:14  profilanswer
 

Bonjour,
 
j'ai un tableau construit via jQuery, avec de l'ajax qui récupère du JSON...
L'objectif est de changer le background-color de toute la ligne et toute la colonne de la cellule qui subit le rollover.
 
Je me suis embêté pour que toutes les lignes aient une classe différente, et toutes les colonnes aient une classe différente : (évidemment le vrai tableau est beaucoup plus gros  :sol: )
 

Code :
  1. <table>
  2. <tr><td class="colonne1 ligne1"></td><td class=" colonne2 ligne1></td></tr>
  3. <tr><td class="colonne1 ligne2"></td><td class=" colonne2 ligne2></td></tr>
  4. </table>


chaque ligne et colonne a aussi une autre classe "pair"/"impair" pour coloriser une ligne sur deux.
 
Donc une fois mon tableau rempli avec mon flux ajax (et j'ai vérifié avec firebug, tout les id sont au bon endroit  :o  ), j'applique ce code qui se borne à vouloir changer la couleur de la ligne, pas la colonne : (commenté, différents essaies...)  :p  
 

Code :
  1. for(var i = 0; i <= listeIdGroupe.length; i++) {
  2. /*
  3.  $(".classLigneNumero" + listeIdGroupe[i]).hover(
  4.   function(){
  5.    //$(".classLigneNumero" + listeIdGroupe[i]).css("background-color", "red" );
  6.    $(this).parents('tr').css("background-color", "red" );
  7.   },
  8.   function(){
  9.    $(".colonnePaire" ).css("background-color","#CC9999" );
  10.    $(".colonneImpaire" ).css("background-color","#9999CC" );
  11.   }
  12.  );*/
  13.  $(".classLigneNumero" + listeIdGroupe[i]).mouseover(function(){
  14.    //$(".classLigneNumero" + listeIdGroupe[i]).css("background-color", "red" );
  15.    //$(this).parents('tr').css("background-color", "red" );
  16.    //$(".classLigneNumero" + listeIdGroupe[i]).css("background-color", "red" );
  17.    $(this).css("background-color", "red" );
  18.  });
  19.  $(".classLigneNumero" + listeIdGroupe[i]).mouseout(function(){
  20.   $(".colonnePaire" ).css("background-color","#CC9999" );
  21.   $(".colonneImpaire" ).css("background-color","#9999CC" );
  22.  });
  23. }
  24. /*
  25. for(var i = 0; i <= listeIdGroupe.length; i++) {
  26.  $('.classLigneNumero' + i).hover( function(){
  27.    $('.classLigneNumero' + listeIdGroupe[i]).css('background-color', 'red');
  28.   },
  29.   function(){
  30.    $(".colonnePaire" ).css("background-color","#CC9999" );
  31.    $(".colonneImpaire" ).css("background-color","#9999CC" );
  32.   }
  33.  );
  34. }*/
  35. /* $('.classLigneNumero1').hover(
  36.  function(){
  37.   $('.classLigneNumero' + listeIdGroupe[i]).css('background-color', 'red');
  38.  },
  39.  function(){
  40.   //$(".colonnePaire" ).css("background-color","#CC9999" );
  41.   //$(".colonneImpaire" ).css("background-color","#9999CC" );
  42.  }
  43. );
  44. */
  45. $(".colonnePaire" ).css("background-color","#CC9999" );
  46. $(".colonneImpaire" ).css("background-color","#9999CC" );
  47. $(".lignePaire" ).css("border","red solid 3px" );
  48. $(".ligneImpaire" ).css("border","yellow solid 3px" );


 
et ça colorise au choix, soit la première cellule de la ligne, soit la cellule qui subit de rollover, mais jamais la ligne entière ....  
la couleur d'origine paire/impaire revient bien par contre. :o  
 
donc question : comment fait on pour faire rollover sur toute la ligne et toute la colonne de la cellule qui subit le rollover ?  :??:  

mood
Publicité
Posté le 29-09-2011 à 19:05:14  profilanswer
 

n°2103992
naeco
Buddy Rich Big Band
Posté le 29-09-2011 à 19:07:42  profilanswer
 

Pour la ligne, c'est fait sur phpmyadmin, mais j'arrive pas à choper le code qui le fait...

n°2104353
Pascal le ​nain
Posté le 02-10-2011 à 20:29:59  profilanswer
 

Sans utiliser de classes, essaye ca (pas teste):
 


$('td').hover(function()
{
   // Ligne
   $(this).parent().css('background', '#xxxxxx');
 
   // Colonne
   $('td:eq(' + $(this).index() + ')').css('background', '#xxxxxx');
 
}, function()
{
   $('tr').css('background', '#yyyyyy');
   $('td').css('background', '#yyyyyy');
});


Message édité par Pascal le nain le 02-10-2011 à 20:32:22

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  rollover sur toute une ligne et toute une colonne avec jquery

 

Sujets relatifs
[AIDE] Mise en ligne site web JAVA-JSP[RESOLU:CONTOURNE] [jQuery] each imbriqué
j'essaie de modifier une div avec jquery et la methode animate[RESOLU] JQuery appel ajax, récuperer la valeur d'une selectbox
passage de parametre avec autocomplete de jquery uiCopie conditionnelle d'une colonne de T1 vers une colonne de T2
Convertisseur html vers PDF en ligne de commande[RESOLU] injection de jquery
[Résolu] Programmation d'un jeu en ligne en flashListe jquery sous IE
Plus de sujets relatifs à : rollover sur toute une ligne et toute une colonne avec jquery


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR