onmouseover sur un tr

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : onmouseover sur un tr

Magg27

Bonjour,

J'ai un problème tout bête mais qui me fais perdre patience :

J'ai un tableau HTML du type :

Code :

<table>
<tr class="police_table" onmouseout="javascript:this.style.backgroundColor='#EEEEF7';" onmouseover="javascript:this.style.backgroundColor='#C0C0C0';">
<td rowspan="3">Produit</td>
<td>Numéro Produit 1</td>
<td>Nom Produit 1</td>
</tr>
<tr>
<td>Numéro Produit 2</td>
<td>Nom Produit 2</td>
</tr>
<tr>
<td>Numéro Produit 3</td>
<td>NomProduit 3</td>
</tr>
</table>

Le truc c'est qu'à cause du rowspan, je ne peut pas surligner toute la ligne entière au passage de la souris... Quelqu'un peut m'aider ?

Message édité par Magg27 le 17-12-2009 à 11:40:47

Publicité

pataluc

chez moi ca marche :spamafote:

quand je survole "produit" ou "Numéro Produit 1" ou "Nom Produit 1" j'ai bien ces trois éléments qui changent de couleur. ou alors ce n'est pas ca que tu veux?

Magg27

Merci pour ta réponse. Effectivement, ce n'est pas ça que je veux : j'aimerais que tout change de couleur au passage de la souris.

lautrejojo

Je ne comprend pas bien ton soucis : en fait, que veux tu surligner exactement au passage de la souris ?
De mon côté, j'ai la première ligne qui est surlignée, et le rowspan fait comme si la première colonne l'était aussi.

Tu veux surligner tout le tableau ? Juste certaines lignes ?

Message édité par lautrejojo le 17-12-2009 à 11:58:19

---------------
Question sur la programmation ? DevWeb it!

Magg27

Désolé pour mon manque de clarté. En fait j'aimerais qu'au passage de la souris tous les éléments du tableau changent de couleur. C'est-à-dire "Produit", "Numéro Produit 1", "Nom Produit 1", "Numéro Produit 2", "Nom Produit 2", "Numéro Produit 3", "Nom Produit 3". En bref tout.

lautrejojo

dans ce cas,

Code :

<table class="police_table" onmouseout="javascript:this.style.backgroundColor='#EEEEF7';" onmouseover="javascript:this.style.backgroundColor='#C0C0C0';">
<tr>
<td rowspan="3">Produit</td>
<td>Numéro Produit 1</td>
<td>Nom Produit 1</td>
</tr>
<tr>
<td>Numéro Produit 2</td>
<td>Nom Produit 2</td>
</tr>
<tr>
<td>Numéro Produit 3</td>
<td>NomProduit 3</td>
</tr>
</table>

Il me semble que ceci répond à ton besoin : j'ai déplacé le javascript à l'ensemble du tableau.

---------------
Question sur la programmation ? DevWeb it!

Magg27

Merci, mais j'ai pris un mauvais exemple. C'est plus compliqué que ça en fait. Il vaut mieux que je présente le véritable contexte :

A l'aide d'une BDD MySQL, il faut que j'affiche diverses informations concernant les clients d'une entreprise sous forme de tableau :

| Nom Client | Pays Client | Produits vendus au client | Spécifications produit
| Client x | France | Cette cellule peut contenir n produits | Cette cellule peut contenir n spécifications

Du coup voici comment je m'y suis pris :

Code :

<table border="1">
<tr>
<td>Nom Client</td>
<td>Pays Client</td>
<td>Produits vendus au client</td>
<td>Spécifications produit</td>
</tr>
<tr>
<td rowspan="n">Client x</td>
<td rowspan="n">Pays Client</td>
<td>Produit x</td>
<td>Spécification x</td>
</tr>
<tr>
<td>Produit x+1</td>
<td>Spécification x+1</td>
</tr>
<tr>
<td>Produit x+2</td>
<td>Spécification x+2</td>
</tr>
etc ....
</table>

A présent je voudrais savoir comment peut-on se débrouiller pour que lorsque l'on passe la souris sur un client, toute la ligne le concernant (avec tous ses produits) peut être mise en surbrillance.

J'ai pensé à diviser ce plan en 2 tables pour les agréger dans une même table, mais le résultat est loin d'être top.

J'espère que j'ai été clair ... c'est assez difficile à expliquer.

Merci encore !

pataluc

regarde de ce coté la: http://p.sohei.org/jquery-plugins/tablehover/

Magg27

Merci beaucoup pour ton aide pataluc mais c'est pas 100% adapté à ce que je veux faire ... Sinon j'ai vu qu'il avait l'outil javascript nextSibling qui peut surbriller 2 lignes en même temps mais je vois pas tout à fait comment l'adapter, à vrai dire je débute en javascript.

Message cité 1 fois

pataluc

Magg27 a écrit :

Merci beaucoup pour ton aide pataluc mais c'est pas 100% adapté à ce que je veux faire ...

comment ca pas adapté? tu veux quoi exactement?

Edit: ok je crois que j'ai compris, tu veux sélectionner toutes les lignes d'un client, même si tu survole une des cases produit.

du coup je sais pas trop. à mon avis le plus simple serait de grouper les cellules avec une classe précise, afin de pouvoir modifier leur couleur facilement...

Message édité par pataluc le 17-12-2009 à 16:02:53

Publicité

pataluc

je te propose ca:

Code :

<html>
<head>
<title></title>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('td').mouseover(function(){
$("td." + $(this).attr('class')).css("background-color","#69f" );
}).mouseout(function(){
$("td." + $(this).attr('class')).css("background-color","#fff" );
});
});
</script>
</head>
<body>
<table id="tableone" border="1">
<tr>
<td>Nom Client</td>
<td>Pays Client</td>
<td>Produits vendus au client</td>
<td>Spécifications produit</td>
</tr>
<tr>
<td rowspan="3" class="client1">Client x</td>
<td rowspan="3" class="client1">Pays Client</td>
<td class="client1">Produit x</td>
<td class="client1">Spécification x</td>
</tr>
<tr>
<td class="client1">Produit x+1</td>
<td class="client1">Spécification x+1</td>
</tr>
<tr>
<td class="client1">Produit x+2</td>
<td class="client1">Spécification x+2</td>
</tr>
<tr>
<td rowspan="3" class="client2">Client x</td>
<td rowspan="3" class="client2">Pays Client</td>
<td class="client2">Produit x</td>
<td class="client2">Spécification x</td>
</tr>
<tr>
<td class="client2">Produit x+1</td>
<td class="client2">Spécification x+1</td>
</tr>
<tr>
<td class="client2">Produit x+2</td>
<td class="client2">Spécification x+2</td>
</tr>
</table>
</body>
</html>

ca semble bien marcher chez moi... par contre ca sous entend d'utiliser l'attribut class pour grouper des cellules... c'est pas über sexy, on doit pouvoir faire mieux mais pour le moment je vois pas comment.

Message édité par pataluc le 17-12-2009 à 16:14:34

Magg27

Merci pataluc !!!!! C'est formidable ce que tu as fait !! Pour ce qui est des attributs class, certes ça alourdie le code mais dans mon programme ça s'insère automatiquement avec une boucle php donc ça ne m'a pas posé problème ...
Encore merci pour tout !!! Merci aussi de m'avoir fait découvrir jQuery !

Message édité par Magg27 le 17-12-2009 à 18:05:23

FORUM HardWare.fr

Programmation

HTML/CSS

onmouseover sur un tr

Sujets relatifs
onmouseover	Problème avec onmouseover
Problème d'ordre de superposition une image affichée avec onmouseover	div surperposées et onMouseOver
onMouseOver-Out sur tableaux	Event onmouseover et onmouseout
onmouseover dans div	onMouseover/out pour les images bordure
[résolu] changement de texte à un endroit précis avec _ onmouseover	OnMouseOver et IE6 ???
Plus de sujets relatifs à : onmouseover sur un tr

Page générée en 0.102 secondes