Discussion :

[boteha]

Bonjour,

Voir ce codepen.

Le code JS allume la tête de ligne et la tête de colonne au survol d'une cellule non vide.

Cela marche bien mais cela a été fait il y a plus de 10 ans et cela peut être simplifié aujourd'hui.

Mon niveau en javascript réclame un peu d'assistance.

1) Sélectionner les cellules non vides hors têtes de lignes et têtes de colonnes.

2) Au survol d'une cellule, trouver tête de ligne et tête de colonne correspondantes.

3) Les allumer.

4) Éteindre quand le pointeur quitte la cellule.

Pouvez-vous me guider un peu ?

Merci d'avance.

[darkstar123456]

Hello,

Je ne suis pas très doué en JS natif donc je vais donner une réponse en jQuery en espérant que ça aide

Mais
1] sélectionner les cellules non vides; c'est forcément le cas.
Si on reprend le Codepen d'exemple, l'événement est sur le survol de la balise a et donc elle n'existe que si une valeur existe (travail prémaché)
2] Ensuite pour connaitre le titre de la ligne, il suffit de prendre le premier enfant du parent (.parent().first() ou sélectionner le premier th : .parent().find('th:first-child'))
3] Pour trouver le titre de la colonne, il suffit de récupérer l'index du parent de l'élément en cours ($(this).parent().index()) et d'utiliser cet index sur la première ligne du tableau

J'ai refait un Codepen qui suit ces explications (avec jQuery donc) : https://codepen.io/DarkStar123456/pen/XWRwWbO

J'ai repris le tableau d'origine, à l'exception des thead td que j'ai changé en thead th parce que c'est beaucoup plus logique d'une part, et que ça empêchait de pouvoir sélectionner correctement les nth-child() d'autre part

[boteha]

Bonjour,

Merci de ta réponse, c'est très intéressant.

Je vais essayer de traduire cela en JS natif car je n'emploie pas jQuery.

Je m'y mets dès que j'ai le temps.

Je te tiens informé.

[Doksuri]

salut,
en gardant ta structure actuelle & en JS natif :

il faut juste ajouter une class CSS pour le hightLight

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

.hightLight { color: red; }

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
document.querySelectorAll('tbody td:not(:first-of-type) a').forEach(cell => {
	cell.addEventListener('mouseover', () => {
  	hoverCell(cell.parentNode);
  });
});
function clearHighLight() {
	document.querySelectorAll('td a').forEach(a => {
  	a.classList.remove('hightLight');
  });
}
function hoverCell(cell) {
	clearHighLight();
	cell.parentNode.getElementsByTagName('a')[0].classList.add('hightLight');
  document.querySelectorAll('thead a')[cell.cellIndex-1].classList.add('hightLight');
}

[boteha]

Bonjour,

Merci de ta réponse.

Je teste ce soir.

Je vous tiens informés.

[boteha]

Bonjour Doksuri,

J'ai chargé ton code sur le codepen et cela fonctionne très bien à un détail près.

Il faut que les têtes s'éteignent quand tu sors de hover (mouseout ?).

J'avoue que je n'ai même pas eu le temps d'analyser ton code.
Je vais le faire.

Je vous tiens informés.