[RESOLU] Surbrillance de cellules dans un tableau à double entrée

Eléphant du PHP | 337 Messages

14 févr. 2015, 13:09

Bonjour à tous,

J'ai un tableau farci de prix en tout genre, et j'aimerais faire en sorte que lorsque l'utilisateur survole une cellule, toutes les cellules correspondant à la ligne et la colonne en question changent de couleur (de sorte que la colonne et la ligne correspondant à la cellule survolée soient très facilement identifiables).

Je saurais le faire pour une cellule toute seule, voire une ligne entière, mais je suis pas spécialement une flèche en javascript : j'ai cherché un peu partout, sans trouver ma réponse !

Y a-t-il une bonne âme parmi vous qui aurait une idée ?

Merci à vous !

Mammouth du PHP | 737 Messages

16 févr. 2015, 10:52

Bonjour,

Il faut identifier chaque élément avec un id unique et ensuite via javascript on peut par exemple rajouter une class pour colorier les éléments souhaités.

Mega
;)
Dyslexics are teople poo

ViPHP
ViPHP | 1996 Messages

17 févr. 2015, 00:35

Bonjour,

Il faut identifier chaque élément avec un id unique et ensuite via javascript on peut par exemple rajouter une class pour colorier les éléments souhaités.

Mega
;)
Pas obligatoirement. il faut juste stipuler le nom du tableau :
[javascript]$(document.body).on({
mouseenter : function () {
//récupération de l'index de la cellule
var i = $(this).index();
//sélection de toutes les cellules ayant le mêmes index (normalement dans la même colonne)
$('tr').each(function () {
$(this).children('td').each(function() {
if ($(this).index() == i)
$(this).css({color : 'blue'});
});
});
//et sélection de la cellule et des cellule soeurs
$(this).siblings('td').add($(this)).css({color : 'red'});
},
mouseleave : function () {
var i = $(this).index();
$('table tr td').css({color : 'black'});
}
},'#nomTableau tr td');[/javascript]

Cet exemple colorie en bleu la colonne et en rouge la ligne. Après tu peux faire joujou avec les CSS pour avoir le rendu que tu veux.
It is nice to be important but it is more important to be nice
http://www.aureuswebfactory.fr

Mammouth du PHP | 737 Messages

17 févr. 2015, 10:16

Slt,

Yep ça rejoint ce que j'ai dit mais en plus simple en effet :)

Par contre s'il y a des imbrications de table ça risque de couiner non ?

Mega
;)
Dyslexics are teople poo

Eléphant du PHP | 337 Messages

17 févr. 2015, 14:43

C'est du jQuery ça non ? Je découvre en ce moment même les possibilités de cette bibliothèque (faut se mettre à jour crévindju !)

Mammouth du PHP | 688 Messages

17 févr. 2015, 16:19

c'est bien du jQuery

Eléphant du PHP | 337 Messages

18 févr. 2015, 14:35

Merci pour votre aide !

ViPHP
ViPHP | 1996 Messages

18 févr. 2015, 21:40

Slt,

Yep ça rejoint ce que j'ai dit mais en plus simple en effet :)

Par contre s'il y a des imbrications de table ça risque de couiner non ?

Mega
;)
Ah oui ! Comme ça brut de pomme, ça risque de couiner :D
Mais comme j'avais pas trop d'élément sur la structure j'ai fais cela sur un tableau standard...
Je pense néanmoins que tu peux adapter ce code en cas d'imbrication car il s'agit juste de "coordonnées" dans le tableau. A voir...
It is nice to be important but it is more important to be nice
http://www.aureuswebfactory.fr