Discussion :

[boteha]

Bonjour,

Voir ce codepen

Le javascript vise à allumer les parents.

Il fonctionne bien sur grand écran.

Par contre, sur petit écran, les id en minuscule (exemple : id="a") ne sont plus allumées.

Je ne suis pas arrivé à rendre le code insensible à la casse.

Pouvez-vous m'aider ?

[NoSmoking]

Bonjour,

Je ne suis pas arrivé à rendre le code insensible à la casse.

tu n'as pas à chercher à rendre JavaScript insensible à la casse, c'est peine perdue.
C'est à toi de tenir compte de tes contraintes issues de ton analyse !

Comme, suivant la taille de la fenêtre d'affichage, tu masques/affiches un ou l'autre de tes éléments rien ne t'empêche de leur affecter en même temps les mêmes classes.

J'ai trouvé ton code inutilement compliqué, compte tenu des navigateurs actuels, mais bon ceci étant tu peux simplifier ta fonction initBotegaRollover pour tenir compte de ma remarque ci-dessus.

Cela pourrait donner quelque chose comme :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function initBotegaRollover() {
  // définition fonction
  const customFunction = function (objet, doOver) {
    let id = objet.id;
    while (id.length > 1) {
      id = id.substr(0, id.length - 1);
      // récup. lower et Upper id
      elems = document.querySelectorAll("#" + id + ",#" + id.toLowerCase());
      // Array.prototype.forEach.call(elems, function(el){  // si IE support
      elems.forEach(function (el) {
        doOver ? addClass(el, 'blu') : removeClass(el, 'blu');
      });
    }
  };
  // affectation action aux tables
  const tables = document.querySelectorAll(".roll");
  // Array.prototype.forEach.call(tables, function(table){  // si IE support
  tables.forEach( function(table){
    addCustomRollover(table, customFunction);
  });
}

à voir si cela convient à ton besoin !

[javatwister]

Le javascript vise à allumer les parents.

C'est un message subliminal? Une maxime métaphysique? Une déclaration de révolte contre l'autorité parentale?

Parce que sinon, vu que tout est dans un tableau, quel intérêt de masquer les cellules et de souligner par un script très long les lignes et les colonnes correspondant au contenu pointé?

[boteha]

Bonjour,

Merci de votre suivi.

J'essaye ce soir le code de NoSmoking. Je vous tiens informés.

Autrement ce script date d'il y a 10 ans, il est adapté aux navigateurs de l'époque.
Ce n'est pas moi qu'il l'ai écrit et je dois dire que je ne suis pas assez calé en javascript pour l'améliorer.
Il a le mérite de bien fonctionner et d'être très rapide en dépit de sa complexité.

Parce que sinon, vu que tout est dans un tableau, quel intérêt de masquer les cellules et de souligner par un script très long les lignes et les colonnes correspondant au contenu pointé?

Masquer les cellules c'est pour avoir en petit écran une mise en page plus compacte.
J'ai cherché à le faire en css mais là je m'y connais un peu et je n'ai pas trouvé de solution sans ajouter de la structure HTML, ce qui est regrettable, j'en conviens.

Allumer les parents c'est un effet sympa dans un tableau arborescent.

[boteha]

Bonjour,

Le code de NoSmoking fonctionne parfaitement.

Je l'ai intégré au codepen.

Je mets en production avant de cliquer Résolu.

[boteha]

Bonjour,

Code bon pour Firefox, Chrome, Edge.

Par contre ne fonctionne pas sur IE 11, je suppose que tu t'en doutais.

Ce n'est pas trop grave mais si tu vois une petite correction à faire pour le rendre compatible avec IE c'est toujours mieux.

[javatwister]

As-tu vu que les lignes 9 et 17 proposaient une alternative IE?

[boteha]

Bonjour,

As-tu vu que les lignes 9 et 17 proposaient une alternative IE?

Oui, j'ai vu juste après avoir posté ma question non avenue, j'allais éditer mais tu as précisé avant.

La version compatible IE fonctionne parfaitement sur IE 11 et les autres navigateurs testés.

Sur le codepen je laisse la version pour navigateurs autres qu'IE.

J'attends un peu avant de cocher Résolu.

Je vous remercie beaucoup.

[NoSmoking]

Autrement ce script date d'il y a 10 ans, il est adapté aux navigateurs de l'époque.

effectivement JavaScript tout comme les APi associées et les navigateurs ont bien évolués depuis.

Si l'on considère tes fonctions liées à l'affectation/suppression de classe CSS, il existe maintenant element.classList, qui te permettrait d'alléger grandement ton code.

Il en est de même pour element.addEventListener.

Par contre il est vrai que NodeList.prototype.forEach n'est pas reconnu par IE, et le sera donc jamais, mais un simple polyfill peut rétablir la situation.

En prenant en compte tous ces points, plus la délégation des événements sur les <table>, ton code pourrait se résumer à une grosse vingtaine de lignes et ressembler à :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
// polyfill pour IE support
if (!NodeList.prototype.forEach) {
  // console.warn("define NodeList.prototype.forEach")
  NodeList.prototype.forEach = Array.prototype.forEach;
}
/**
 * par délégation sur les tables
 */
function initBotegaRollover() {
  // définition fonctions
  function customFunction(el, doOver) {
    let id = el.id;
    while (id.length > 1) {
      id = id.substr(0, id.length - 1);
      // récup. lower et Upper id
      const elems = document.querySelectorAll("#" + id + ",#" + id.toLowerCase());
      elems.forEach(function (el) {
        el.classList[doOver ? "add" : "remove"]("blu");
      });
    }
  }
 
  function handleMouse(e) {
    let elem = e.target;
    // recherche par selecteur
    while (elem && elem.tagName !== "TD") {
      elem = elem.parentNode;
    }
    if (elem) {
      customFunction(elem, "mouseover" === e.type);
    }
  }
  // affectation événements sur les tables
  const tables = document.querySelectorAll(".roll");
  tables.forEach(function (table) {
    table.addEventListener("mouseover", handleMouse);
    table.addEventListener("mouseout", handleMouse);
  });
}

... oui enfin une petite quarantaine de lignes , dans 10 ans il te suffira de supprimer les premières lignes quand IE sera définitivement oublié

[boteha]

Bonjour NoSmoking,

Merci pour ton nouveau code.

Par contre je pense qu'il y a un petit problème qui m'échappe.

Regarde le codepen, il ne fonctionne plus.

[NoSmoking]

Par contre je pense qu'il y a un petit problème qui m'échappe.

Il te faut bien sûr exécuter la fonction avec par exemple :

Code :

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

window.addEventListener("load", initBotegaRollover);

le code proposé ne reprend que la fonction de base

[boteha]

Bonjour NoSmoking,

J'ai mis à jour le codepen et cela fonctionne parfaitement, excuse ma question de boulet.

Je fais des tests en production et reviens vers vous.

[boteha]

Bonjour,

Le script de NoSmoking fonctionne parfaitement.

Je coche Résolu.

Pour info j'ouvre bientôt une nouvelle discussion : Se débarrasser des scripts inline.

[boteha]

Bonjour,

Je me permets de déterrer le sujet avec une question subsidiaire.

D'abord je précise que le code de NoSmoking que l'on trouve dans le codepen fonctionne parfaitement en production, y compris sur IE.

Petite évolution, j'aimerais que survol de la cellule provoque l'action non seulement sur les ascendants mais aussi sur le lien de la cellule.

Par exemple tu survoles la cellule où se trouve Cat5e et Cat5e s'allume.
Je parle bien de la cellule et pas uniquement du lien directement.

J'ai essayé différents changements dans le script de NoSmoking mais j'avoue ne pas y être arrivé.

Ce n'est sans doute qu'un petite chose à changer, j'espère que la question est claire.

Merci de votre aide.

EDIT

Pardon, question stupide car c'est trop facile à faire en CSS.

td:hover > a {color: red}