Discussion :

[Bensljul]

Bonjour à tous,
je cale sur un sujet qui semble pourtant bien faisable sur un tableau html.

En fait j'ai fait un script bash qui me génère une page html affichant un tableau de serveurs, parmi les paramètres il y a l'indication si un serveur est activé ou non.
du coup j'ai penser à faire code mon tableaux html comme ceci :

Code HTML :

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
<link href="index.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="index.js"></script>
<table border=1 style="border-collapse:collapse">
<tr>
    <td colspan=5>FO</td>
</tr>
<tr class="disable">
    <td>1</td>
    <td>1</td>
    <td>1</td>
    <td>1</td>
    <td>disable</td>
</tr>
<tr class="enable">
    <td>1</td>
    <td>1</td>
    <td>1</td>
    <td>1</td>
    <td>enable</td>
</tr>
    <td colspan=5>FOVIP</td>
</tr>
<tr class="disable">
    <td>1</td>
    <td>1</td>
    <td>1</td>
    <td>1</td>
    <td>disable</td>
</tr>
<tr class="enable">
    <td>1</td>
    <td>1</td>
    <td>1</td>
    <td>1</td>
    <td>enable</td>
</tr>
</table>

et je suis en train d'essayer de faire un script afin de masquer les lignes de tableaux qui sont en class = "disable" en utilisant javascript. Voici le code que j'ai tenté de faire :

Code :

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

1
2
3
4
5
6
var elem = document.getElementsByTagName('tr')
for (var i=0; i<elem.lenght;i++){
    if (elem.getElementsByClassName(i) = "disable"){
        elem[i].style.display = "none";
    }
}

je n'ai pas de message d'erreur dans l’exécution du javascript mais les lignes concernées sont toujours visibles ><

Du coup je viens chercher conseil et aide
merci à vous !!

[psychadelic]

visiblement tu débutes complètement en JavaScript.

1 - vaut mieux terminer tes instructions avec un point virgule
2 - utiliser le DEBUGGER pour analyse ce qui peut clocher dans ton code
3 - consulter la doc MDN => https://developer.mozilla.org/fr/

tes erreurs :

1 - en JavaScript les test d'égalité ce font avec un " == " (double signe d'égalité) ou triple " === " (égalité stricte)
2 la fonction getElementsByClassName donne un array, elle ne donne pas le nom de la classe d'un élément

mon conseil : si un truc marche mal dans ton code, c'est plus probablement que tu à fais une erreur et non un bug de la machine, donc encore une fois utiliser le DEBUGGER, et l'instruction console.log.

Code JavaScript :

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

1
2
3
4
5
6
7
8
9
    var elem = document.getElementsByTagName('tr');
 
    for (var i = 0; i < elem.length; i++) {
 
      if ( elem[i].className == "disable") {
        elem[i].style.display = "none";
      }
 
   }

[Invité]

Bonjour,

Pourquoi le faire en JavaScript ?

Code css :

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

.disable { display:none; }

[Beginner.]

Oui je me suis demandé la même chose (pourquoi le faire en JS ?)...

Mais si on le fait en JS pourquoi ne pas utiliser directement document.getElementsByClassName("disable"), ça économiserait notamment un test ?

[psychadelic]

Pourquoi en JS et pourquoi ce JS*??

Comme ma problématique mentale me harcèle pour m’obliger à répondre, et justifier ma réponse précédente, que vous semblez critiquer (je résiste aussi à la parano qui pour l’instant me laisse juste supposer que cette réponse est mauvaise et que vous mettez en doute ma faculté de compréhension sur ce sujet, ou voir davantage ?).

Bref.
Alors explications :
1 - Bensljul n’a que 7 post ici à son actif, et sa question laisse à penser qu’il débute en JS.

2 - visiblement il a effectué un effort de raisonnement pour établir un algorithme qui puisse tenir son objectif.

3 - son code fait défaut, et naturellement il se demande ce qui cloche dedans.

Donc son problème est avant tout de comprendre ce qui ne va pas dans son code, et non de rechercher une solution différente (ou meilleure).

On est avant tout dans un problème d’apprentissage et non dans un problème de performance.

Par exemple, il est plus utile de lui rappeler qu’en JavaScript, un test d’égalité se fait par un doublement du signe égal.
Ce genre d’information est prioritaire s’il veut savoir coder en JavaScript;

Ignorer ce problème en lui soumettant une réponse en CSS serait contre productif dans sa courbe d’apprentissage,
parce que les débutants en HTML commencent par faire du HTML, puis du JavaScript ensuite.
Le CSS semble souvent perçu comme secondaire par les débutants (et d’autres: certains s’imaginent encore que le CSS n’est pas un langage ),
alors ils se focalisent d’abord sur le couple HTML / JS.

Donc j’ai fait un effort se voulant pédagogique pour l’aider à remettre de l’ordre dans son code, et son code à lui seulement.

[Beginner.]

Salut,

Comme ma problématique mentale me harcèle pour m’obliger à répondre, et justifier ma réponse précédente, que vous semblez critiquer (je résiste aussi à la parano qui pour l’instant me laisse juste supposer que cette réponse est mauvaise et que vous mettez en doute ma faculté de compréhension sur ce sujet, ou voir davantage ?).

Ben en fait non je ne te critiquais pas, ma réflexion concerne l'auteur de la question qui ne sait peut-être pas qu'il existe une solution CSS plus simple...

Mais te concernant tu n'as fait que répondre à sa demande et je trouve ça très bien et instructif... Comme tu dis toi-même "son code fait défaut, et naturellement il se demande ce qui cloche dedans" il est donc normal que tu lui répondes comme tu l'as fait en corrigeant son code JS plutôt qu'en lui donnant une autre solution...

Donc son problème est avant tout de comprendre ce qui ne va pas dans son code, et non de rechercher une solution différente (ou meilleure).

Oui c'est possible mais il est aussi possible qu'il ne sache pas qu'il existe une solution plus simple/performante avec le CSS et que ce soit pour cette raison qu'il utilise du JS sans être forcément contre une solution différente (dans tous les cas je trouve que tu as bien fait de corriger et d'expliquer ce qui ne va pas dans son code c'est instructif mais je pense aussi que ça n'interdit pas de proposer une autre solution)...

Les deux interprétations sont possibles et donc pour moi ta réponse et les autres réponses sont toutes utiles et complémentaires, elles sont toutes instructives pas seulement pour l'auteur...
Et qui peut le plus peut le moins : si seule une des réponses intéresse l'auteur de la question il pourra la choisir et laisser les autres... Les autres réponses pouvant intéresser d'autres lecteurs...

Le CSS semble souvent perçu comme secondaire par les débutants (et d’autres: certains s’imaginent encore que le CSS n’est pas un langage :roll:),
alors ils se focalisent d’abord sur le couple HTML / JS.

Ben justement leur montrer comment le CSS est efficace pour résoudre certains problèmes pourraient faire changer leur perception...

Voilà j’espère avoir clarifier les choses...

[psychadelic]

Ben non, je ne partage pas du tout ton point de vue.
Et même si son code est loin d’être merveilleux, ce n’est pas de la m*** pour autant.

Ton code en css est certes une bonne solution, mais elle est aussi critiquable, tu aurais pu lui indiquer que l’usage du mot disable peut prêter à confusion (disabled fait partie du vocabulaire HTML).

La pédagogie c’est surtout ça*: avancer pas à pas. On commence par un vélo à pédale, la grosse moto c’est quand il sera un peu plus grand.