rollover sur toute une ligne et toute une colonne avec jquery

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : rollover sur toute une ligne et toute une colonne avec jquery

naeco

Buddy Rich Big Band

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 ? :??:

Publicité

naeco

Buddy Rich Big Band

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

Pascal le nain

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

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 ui	Copie 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 flash	Liste jquery sous IE
Plus de sujets relatifs à : rollover sur toute une ligne et toute une colonne avec jquery

Page générée en 0.046 secondes