Allumer les têtes de ligne/colonne d'un tableau matrice.

Version imprimable

13/08/2021, 21h55
boteha

Allumer les têtes de ligne/colonne d'un tableau matrice.

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.
16/08/2021, 14h54
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
20/08/2021, 21h58
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é.

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

il faut juste ajouter une class CSS pour le hightLight

Code:

.hightLight { color: red; }

Code:

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');
}

23/08/2021, 10h53
boteha

Bonjour,

Merci de ta réponse.

Je teste ce soir.

Je vous tiens informés.
23/08/2021, 22h15
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.

Code:

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);
  });
  cell.addEventListener('mouseout', clearHighLight);
});
function clearHighLight() {
	document.querySelectorAll('td a').forEach(a => {
  	a.classList.remove('hightLight');
  });
}
function hoverCell(cell) {
	cell.parentNode.getElementsByTagName('a')[0].classList.add('hightLight');
  document.querySelectorAll('thead a')[cell.cellIndex-1].classList.add('hightLight');
}

le seul "hic" c'est que t'auras un effet de clignottement quand tu survol les cellules (apres si c'est vraiment genant, on peu ajouter un timeout)

24/08/2021, 12h04
boteha

Bonjour,

Merci de ta réponse.

Je fais le test ce soir.

Je vous tiens informé.
24/08/2021, 20h44
boteha

Bonjour,

Voir le codepen, ton code fonctionne très bien.

Aucun effet de clignotement, je ne vois pas pourquoi il y en aurait, que crains-tu ?

Petit détail je pense que c'est plus sympa d'appliquer l'effet au survol de la cellule plutôt que du lien (discutable, je reconnais, pas sûr...).
C'est d'ailleurs ce que faisait l'ancien code.

D'où ce sélecteur :

Code:

tbody td:nth-child(n+2):not(:empty)

Qu'en penses-tu ?

Code:

document.querySelectorAll('tbody td:nth-child(n+2):not(:empty)')

Je n'ai pas essayé de changer ton code derrière mais je pense qu'il y aurait peu à faire, non ?

Bonjour,

J'ai fait le truc à ma sauce de non-expert JS en reprenant les sélecteurs de Doksuri que je remercie encore.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 const val = aid.querySelectorAll ('tbody td:nth-child(n+2):not(:empty)'); for (let i = 0; i < val.length; i++) { val[i].addEventListener ('mouseover', function () { this.parentNode.getElementsByTagName('a')[0].classList.add('hightLight'); document.querySelectorAll('thead a')[this.cellIndex-1].classList.add('hightLight'); } ); val[i].addEventListener ('mouseout', function () { this.parentNode.getElementsByTagName('a')[0].classList.remove('hightLight'); document.querySelectorAll('thead a')[this.cellIndex-1].classList.remove('hightLight'); } ); }
Cela marche comme voulu avec hover sur le td, voir le codepen.

Je me demande s'il n'est pas possible d'avoir un sélecteur plus simple pour trouver la tête de colonne :

Code:

querySelector('thead th:nth-child('+ (this.cellIndex + 1) +') > a')

En passant en th tous les td du thead comme demandé à juste titre par darkstar123456.

Bonjour,

J'en suis là sur le codepen.

Sauf erreur cela ne fait appel qu'à un seul tableau.

Si vous voyez comment optimiser merci d'avance.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
const val = aid.querySelectorAll ('tbody td:nth-child(n+2):not(:empty)');
 
for (let i = 0; i < val.length; i++)
{
val[i].addEventListener ('mouseover', function ()
{
this.parentNode.querySelector('td:first-child > a').classList.add('hightLight');
 
aid.querySelector('thead th:nth-child('+ (this.cellIndex + 1) +') > a').classList.add('hightLight');
 
}
);
 
val[i].addEventListener ('mouseout', function ()
{
this.parentNode.querySelector('td:first-child > a').classList.remove('hightLight');
 
aid.querySelector('thead th:nth-child('+ (this.cellIndex + 1) +') > a').classList.remove('hightLight');  
 
}
);
}

Bonjour,

Dernier petit changement j'affecte la classe non pas au lien mais à son td parent.

Voir le codepen.

J'attends quelques jours avant de cocher Résolu, au cas où quelqu'un propose des améliorations.

Encore merci de votre aide.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 const val = aid.querySelectorAll ('tbody td:nth-child(n+2):not(:empty)'); for (let i = 0; i < val.length; i++) { val[i].addEventListener ('mouseover', function () { this.parentNode.querySelector('td:first-child').classList.add('hightLight'); aid.querySelector('thead th:nth-child('+ (this.cellIndex + 1) +')').classList.add('hightLight'); } ); val[i].addEventListener ('mouseout', function () { this.parentNode.querySelector('td:first-child').classList.remove('hightLight'); aid.querySelector('thead th:nth-child('+ (this.cellIndex + 1) +')').classList.remove('hightLight'); } ); }
Code:

.hightLight a {color: red}