rollover sur toute une ligne et toute une colonne avec jquery

Marsh Posté le 29-09-2011 à 19:05:14

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 :

<table>
<tr><td class="colonne1 ligne1"></td><td class=" colonne2 ligne1></td></tr>
<tr><td class="colonne1 ligne2"></td><td class=" colonne2 ligne2></td></tr>
</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 ), j'applique ce code qui se borne à vouloir changer la couleur de la ligne, pas la colonne : (commenté, différents essaies...)

Code :

for(var i = 0; i <= listeIdGroupe.length; i++) {
/*
$(".classLigneNumero" + listeIdGroupe[i]).hover(
function(){
//$(".classLigneNumero" + listeIdGroupe[i]).css("background-color", "red" );
$(this).parents('tr').css("background-color", "red" );
},
function(){
$(".colonnePaire" ).css("background-color","#CC9999" );
$(".colonneImpaire" ).css("background-color","#9999CC" );
}
);*/
$(".classLigneNumero" + listeIdGroupe[i]).mouseover(function(){
//$(".classLigneNumero" + listeIdGroupe[i]).css("background-color", "red" );
//$(this).parents('tr').css("background-color", "red" );
//$(".classLigneNumero" + listeIdGroupe[i]).css("background-color", "red" );
$(this).css("background-color", "red" );
});
$(".classLigneNumero" + listeIdGroupe[i]).mouseout(function(){
$(".colonnePaire" ).css("background-color","#CC9999" );
$(".colonneImpaire" ).css("background-color","#9999CC" );
});
}
/*
for(var i = 0; i <= listeIdGroupe.length; i++) {
$('.classLigneNumero' + i).hover( function(){
$('.classLigneNumero' + listeIdGroupe[i]).css('background-color', 'red');
},
function(){
$(".colonnePaire" ).css("background-color","#CC9999" );
$(".colonneImpaire" ).css("background-color","#9999CC" );
}
);
}*/
/* $('.classLigneNumero1').hover(
function(){
$('.classLigneNumero' + listeIdGroupe[i]).css('background-color', 'red');
},
function(){
//$(".colonnePaire" ).css("background-color","#CC9999" );
//$(".colonneImpaire" ).css("background-color","#9999CC" );
}
);
*/
$(".colonnePaire" ).css("background-color","#CC9999" );
$(".colonneImpaire" ).css("background-color","#9999CC" );
$(".lignePaire" ).css("border","red solid 3px" );
$(".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.

donc question : comment fait on pour faire rollover sur toute la ligne et toute la colonne de la cellule qui subit le rollover ? :??:

Reply

Marsh Posté le 29-09-2011 à 19:05:14

Reply

Marsh Posté le 29-09-2011 à 19:07:42

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

Reply

Marsh Posté le 02-10-2011 à 20:29:59

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

Reply

rollover sur toute une ligne et toute une colonne avec jquery

Sujets relatifs:

Leave a Replay