Cellule change couleur onMouseOver ... [Résolu]

Signaler
Messages postés
62
Date d'inscription
mercredi 3 novembre 2004
Statut
Membre
Dernière intervention
5 mai 2010
-
Messages postés
1
Date d'inscription
vendredi 27 mai 2005
Statut
Membre
Dernière intervention
10 août 2005
-
Hello !

J'ai un problème concernant la mise en forme conditionnelle de tableaux, en javascript.

Je voudrais réaliser un tableau me permettant de mettre en évidence l'en-tête de ligne et l'en-tête de collonne d'une cellule sur laquelle on passe la souris.

Par exemple, si j'ai un tableau de 5x10, et que je passe la souris sur la cellule 3:5, il faudrait que les cellules 3;1 et 1;5 deviennent bleues.

Comment faut il procéder pour atteindre cet abjectif ?
Comment puise-je isoler la première cellule, d'un ligne et en modifier la couleur ?

Merci pour votre aide.
Hector

5 réponses

Messages postés
536
Date d'inscription
lundi 5 mai 2003
Statut
Membre
Dernière intervention
29 janvier 2009
1
Salut !

Pour chaque cellule (hors entetes) tu fais :
<td onMouseOver="javascript:colorier(x,y)" onMouseOut="javascript:colorier(0,0)">

avec x et y le numero de la cellule (ex colorier(3,5))

Il faut que tu nommes tes cellules entetes ex :
<td id="x1" ....>
et
<td id="y1" ...>

fonction javascript:
// colorie les cellules en rouge au survol, blanc par défaut !

<script>
oldX=0;
oldY=0;
function colorier(x,y)
{
//decolorier les anciennes entetes
document.getElementByID("x"+oldX).style.backgroundColor="#FFFFFF";//blanc
document.getElementByID("y"+oldY).style.backgroundColor="#FFFFFF";

if(x!=0)//colorie les entetes
{
document.getElementByID("x"+x).style.backgroundColor="#FF0000";//rouge
document.getElementByID("y"+y).style.backgroundColor="#FF0000";
oldX=x;
oldY=y;
}
}

</script>

voila, j'ai pas testé mais ca devrait eter bon !!
a+++
Messages postés
62
Date d'inscription
mercredi 3 novembre 2004
Statut
Membre
Dernière intervention
5 mai 2010

Hello !


Pour le principe je suis ok par contre les lignes :
document.getElementByID("x"+oldX).style.backgroundColor="#FF0000";
document.getElementByID("y"+oldY).style.backgroundColor="#FF0000";
document.getElementByID("x"+x).style.backgroundColor="#FF0000";
document.getElementByID("y"+y).style.backgroundColor="#FF0000";


ne donnent rien, aucun effet. Si je mets un message d'alerte avant
une de ces lignes, le message s'affiche, si je place le message après,
il ne s'affiche plus ... cela veut-il dire que la ligne n'est pas correcte ?
Faut-il utiliser autre chose que "document" ? Comment faut-il procéder
pour corriger de problème ?


Merci pour votre aide.
Hector
Messages postés
62
Date d'inscription
mercredi 3 novembre 2004
Statut
Membre
Dernière intervention
5 mai 2010

Hello !

Désolé pour le dernier message, je le retire, c'est en ordre
j'avais un problème de rafaichissement.
Messages postés
536
Date d'inscription
lundi 5 mai 2003
Statut
Membre
Dernière intervention
29 janvier 2009
1
lusss !

T'as essayé :

getElementById (Id au lieu de ID)
Messages postés
1
Date d'inscription
vendredi 27 mai 2005
Statut
Membre
Dernière intervention
10 août 2005

Salut à tous,

autre solution moins lourde, si je puis me permettre :



one,

two,

three,

four,

five




ça marche aussi quand le tableau a plusieurs lignes ;) et les id sont facultatifs...