Masquer ligne de tableau html

Version imprimable

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:

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:

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 !!

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:

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"; } }

17/08/2018, 15h25
Invité

Bonjour,

Pourquoi le faire en JavaScript ? :koi:

Code:

.disable { display:none; }
17/08/2018, 21h43
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 ?
18/08/2018, 18h39
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 :roll:),
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.
18/08/2018, 19h58
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.
18/08/2018, 22h35
Beginner.

Salut,

Citation:

Envoyé par psychadelic

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...

Citation:

Envoyé par psychadelic

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...

Citation:

Envoyé par psychadelic

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...
20/08/2018, 09h09
Bensljul

Bonjour à tous!!

désolé pour le retard de réponse ! je vous remercie tous pour vos réponses :)

Et oui je débute totalement en javascript et l'on m"a demandé de faire cela en javascript alors qu'en bash j'aurais pu le faire très simplement ^^

et ce que je ne comprend pas c'est que j'ai un collégue qui a fait ces lignes de codes mais un utilisant un tableau fait dans un div avec des span et ca marche lol j'essaye de le refaire sur un table et ca ne veut pas ^^

Ce matin je vais essayer de refaire ce que j'ai essyé la dernière et vous tiendrai au courant!

Merci encore !

Alors j'ai réessayer plusieurs de vos solutions et voici le bilan :
#pour le css ca marche mais je pense que pour la génération automatique via mon script bash cela ne sera pas pratique ^^

#j'ai essayer de passer par une fonction que je place dans un bouton à la fin de mon tableau dont voici le code :

#HTML:

Code:

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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="index.css" rel="stylesheet" type="text/css" />
    <script src="index.js" language="javascript"></script>
  </head>
  <body>
<table border=1 style="border-collapse:collapse" id="Table">
 
<tr>
    <th id="FO" colspan=7>FO</th>
</tr>
<tr class="line">
    <th class="entete">A</th>
    <th class="entete">B</th> 
    <th class="entete">C</th> 
    <th class="entete">D</th> 
    <th class="entete">E</th>
</tr>  
<tr class="line">
    <td class="cell">1</td>
    <td class="cell">1</td>
    <td class="cell">1</td>
    <td class="cell">1</td>
    <td class="cell">disable</td>
</tr>
<tr class="line">
    <td class="cell">1</td>
    <td class="cell">1</td>
    <td class="cell">1</td>
    <td class="cell">1</td>
    <td class="cell">enable</td>
</tr>
    <td id="FOVIP" colspan=7>FOVIP</td>
</tr>
<tr class="line">
    <th class="entete">A</th>
    <th class="entete">B</th> 
    <th class="entete">C</th> 
    <th class="entete">D</th> 
    <th class="entete">E</th>
</tr>
<tr class="line"">
    <td class="cell">1</td>
    <td class="cell">1</td>
    <td class="cell">1</td>
    <td class="cell">1</td>
    <td class="cell">disable</td>
</tr>
<tr class="line">
    <td class="cell">1</td>
    <td class="cell">1</td>
    <td class="cell">1</td>
    <td class="cell">1</td>
    <td class="cell">enable</td>
</tr>
</table>
<button onclick="supprligne()">Cliquez ici</button>
  </body>
</html>

#JS

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
function supprligne(){
var tab = document.getElementById("table");
var line = tab.getElementsByClassName("line");
 
for (var i = 0; i < line.length; i++) {
    var cell = line[i].getElementsByClassName("cell"); //recupération valeurs cellules
     if (cells[4].innerHTML.indexOf("disable") != -1) { //boucle pour ne pas afficer les lignes ou il y a la valeur "disable" dans la 4eme cellule
       if (line[i].style.display == '') {
         line[i].style.display = 'none';
        } else {
         line[i].style.display = '';
        }
      } else {
        line[i].style.display == 'initial';
      }
    }
}

le problème est que la console javascript me met ce message en erreur quand j'appuie sur le bouton :
"TypeError: tab is null" ><

20/08/2018, 12h31
Invité

Code:

<table ..... id="Table">

"Table" : avec une majuscule.

Si tu veux apprendre, et éviter les confusions... Mets des noms (de classe, id,...) différents des noms de balises.
20/08/2018, 14h01
Bensljul

Arf oui j'ai fait des boulettes dans les nom de classes >< maintenant cela fonctionne :)

Merci à vous !

On n'est pas obligé de mettre des classes à TOUS les <tr> et <td> !

On y arrive très bien avec .getElementsByTagName() :

Code:

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
40
41
42
43
44
45
46
47
48
49
50
51
<table border=1 style="border-collapse:collapse" id="idTable">
 
<tr>
    <th id="FO" colspan=7>FO</th>
</tr>
<tr>
    <th>A</th>
    <th>B</th> 
    <th>C</th> 
    <th>D</th> 
    <th>E</th>
</tr>  
<tr>
    <td>1</td>
    <td>1</td>
    <td>1</td>
    <td>1</td>
    <td>disable</td>
</tr>
<tr>
    <td>1</td>
    <td>1</td>
    <td>1</td>
    <td>1</td>
    <td>enable</td>
</tr>
    <td id="FOVIP" colspan=7>FOVIP</td>
</tr>
<tr>
    <th>A</th>
    <th>B</th> 
    <th>C</th> 
    <th>D</th> 
    <th>E</th>
</tr>
<tr>
    <td>1</td>
    <td>1</td>
    <td>1</td>
    <td>1</td>
    <td>disable</td>
</tr>
<tr>
    <td>1</td>
    <td>1</td>
    <td>1</td>
    <td>1</td>
    <td>enable</td>
</tr>
</table>
<button onclick="supprligne()">Cliquez ici</button>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function supprligne() 
{
  var tab = document.getElementById("idTable");
  var line = tab.getElementsByTagName("tr"); // on cible les <tr> de la table
 
  for (var i = 0; i < line.length; i++) {
    var cells = line[i].getElementsByTagName("td"); // on cible les <td> (cellules) de la ligne line[i]
    if (cells[4] && cells[4].innerHTML.indexOf("disable") != -1) 
    {
      // afficher/masquer les lignes ou il y a la valeur "disable" dans la 4eme cellule
      line[i].style.display = ( line[i].style.display == "" )? "none" : ""; // (condition ternaire)
    }
  }
}

Remarque :

Code:

if (cells[4] && cells[4].innerHTML.indexOf("disable") != -1)

on vérifie d'abord que la cellule existe avant de tester son contenu.

En l'occurrence, on peut aussi simplement écrire :

Code:

if (cells[4] && cells[4].innerHTML=="disable")