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?