Afficher/Masquer les colonnes d'un tableau

**snheed** · 22/10/2009, 11h07

Bonjour à tous,

J'ai un tableau de données et je souhaite pouvoir afficher ou masquer certaines colonnes avec des checkbox. J'ai adapté un script que j'ai trouvé sur Internet qui fonctionne très bien sous Firefox mais pas sous IE8.

Voici l'erreur que j'obtiens sous IE8 :

Message : '0.style' a la valeur Null ou n'est pas un objet.
Ligne : 8
Caractère : 7

Voici mon code :

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
40
41
42
43
44
45
46
47
48
49
50
51
52
 
<html>
 
  <script type="text/javascript">
 
    function inverse(ID, name){
      var table = document.getElementById(ID);
      var detail = document.getElementsByName(name);
      if (detail[0].style.display == "table-cell"){
        for(var i = 0; i < detail.length; ++i) detail[i].style.display = "none";
      } else {
        for(var i = 0; i < detail.length; ++i) detail[i].style.display = "table-cell";
      }
    }
 
  </script>
 
  <body onload="inverse('tb', 'col0'); inverse('tb', 'col1'); inverse('tb', 'col2'); inverse('tb', 'col3');">
    Masquer/Afficher Col0 : <input type='checkbox' name='checkcol0' onClick="inverse('tb', 'col0')"; CHECKED><BR>
    Masquer/Afficher Col1 : <input type='checkbox' name='checkcol1' onClick="inverse('tb', 'col1')"; CHECKED><BR> 
    Masquer/Afficher Col2 : <input type='checkbox' name='checkcol2' onClick="inverse('tb', 'col2')"; CHECKED><BR> 
    Masquer/Afficher Col3 : <input type='checkbox' name='checkcol3' onClick="inverse('tb', 'col3')"; CHECKED><BR>
    <BR>     
    <table border="1" id="tb">
      <tr>
        <td name="col0">Nom</td>
        <td name="col1">Prénom</td>
        <td name="col2">Age</td>
        <td name="col3">Ville</td>
     </tr>
     <tr>
        <td name="col0">Dupont</td>
        <td name="col1">Henri</td>
        <td name="col2">25</td>
        <td name="col3">Rennes</td>
     </tr>
     <tr>
        <td name="col0">Durand</td>
        <td name="col1">Paul</td>
        <td name="col2">35</td>
        <td name="col3">Lyon</td>       
      </tr>
      <tr>
        <td name="col0">Martin</td>
        <td name="col1">Claude</td>
        <td name="col2">40</td>
        <td name="col3">Paris</td>
      </tr>  
    </table> 
  </body>
 
</html>

Quelqu'un serait-il en mesure de me dire si ce code peut être adapté pour fonctionner à la fois sous Firefox et IE8 (ou version antérieur) et si oui, comment ?

Merci d'avance à tous ceux qui pourrons m'aider.

Snheed

**vermine** · 22/10/2009, 11h11

Bonjour,

Je sais bien que IE6 ne comprenait pas l'option:

Code :

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

table-cell

Peut-être que IE8 ne la comprend tjs pas. Remplacez-la par:

Code :

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

block //Peut-être inline, selon le contenu des td.

**Matthieu2000** · 22/10/2009, 11h13

ajoute un attribut style à tes cellules!

**Bovino** · 22/10/2009, 11h26

Evite d'utiliser des mots clés du langage (comme name) en nom de paramètre !

**snheed** · 22/10/2009, 11h31

Merci à tous les deux pour vos réponses.

J'ai donc modifié le code en fonction de vos remarques mais mis à part une mise en page différente sous Firefox (les colonnes ne sont plus alignées pareilles sur toutes les lignes), j'ai toujours la même erreur sur IE8.

Voici mon code modifié :

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
40
41
42
43
44
45
46
47
48
49
50
51
52
 
<html>
 
  <script type="text/javascript">
 
    function inverse(ID, COL){
      var table = document.getElementById(ID);
      var detail = document.getElementsByName(COL);
      if (detail[0].style.display == "inline"){
        for(var i = 0; i < detail.length; ++i) detail[i].style.display = "none";
      } else {
        for(var i = 0; i < detail.length; ++i) detail[i].style.display = "inline";
      }
    }
 
  </script>
 
  <body>
    Masquer/Afficher Col0 : <input type='checkbox' name='checkcol0' onClick="inverse('tb', 'col0')"; CHECKED><BR>
    Masquer/Afficher Col1 : <input type='checkbox' name='checkcol1' onClick="inverse('tb', 'col1')"; CHECKED><BR> 
    Masquer/Afficher Col2 : <input type='checkbox' name='checkcol2' onClick="inverse('tb', 'col2')"; CHECKED><BR> 
    Masquer/Afficher Col3 : <input type='checkbox' name='checkcol3' onClick="inverse('tb', 'col3')"; CHECKED><BR>
    <BR>     
    <table border="1" id="tb">
      <tr>
        <td name="col0" style=display:inline>Nom</td>
        <td name="col1" style=display:inline>Prénom</td>
        <td name="col2" style=display:inline>Age</td>
        <td name="col3" style=display:inline>Ville</td>
     </tr>
     <tr>
        <td name="col0" style=display:inline>Dupont</td>
        <td name="col1" style=display:inline>Henri</td>
        <td name="col2" style=display:inline>25</td>
        <td name="col3" style=display:inline>Rennes</td>
     </tr>
     <tr>
        <td name="col0" style=display:inline>Durand</td>
        <td name="col1" style=display:inline>Paul</td>
        <td name="col2" style=display:inline>35</td>
        <td name="col3" style=display:inline>Lyon</td>       
      </tr>
      <tr>
        <td name="col0" style=display:inline>Martin</td>
        <td name="col1" style=display:inline>Claude</td>
        <td name="col2" style=display:inline>40</td>
        <td name="col3" style=display:inline>Paris</td>
      </tr>  
    </table> 
  </body>
 
</html>

Merci encore pour votre aide.

Snheed

Edit : Merci Bovino, pour ta remarque. J'ai rectifié mon code.

**vermine** · 22/10/2009, 11h37

Vous avez essayé "block" à la place d' "inline" ? C'est peut-être ça qui casse l'alignement des colonnes.

Mais ça ne changera rien à mon avis au problème. Il reste la remarque de Bovino.

Et mettre des quottes:

Code :

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

<td name="col3" style="display:inline">Paris</td>

**Bovino** · 22/10/2009, 11h38

Avec un peu de rigueur de syntaxe, ça donnerait plutôt :

Code :

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

<td name="col0" style="display:inline">Nom</td>

Ceci dit, tu n'as pas besoin de ça, alterne plutôt les valeurs 'none' et '' :

Code :

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

1
2
3
4
5
if (detail[0].style.display == "none"){
    for(var i = 0; i < detail.length; ++i) {detail[i].style.display = "";}
} else {
    for(var i = 0; i < detail.length; ++i) {detail[i].style.display = "none";}
}

En supprimant bien le display inline perturbant dans les balises !

**snheed** · 22/10/2009, 11h48

J'ai modifié à nouveau mon code en fonction de vos remarques et malheureusement, j'ai toujours le même problème.

Voici mon code modifié :

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
40
41
42
43
44
45
46
47
48
49
50
51
52
 
<html>
 
  <script type="text/javascript">
 
    function inverse(ID, COL){
      var table = document.getElementById(ID);
      var detail = document.getElementsByName(COL);
      if (detail[0].style.display == "none"){
        for(var i = 0; i < detail.length; ++i) {detail[i].style.display = "";}
      } else {
        for(var i = 0; i < detail.length; ++i) {detail[i].style.display = "none";}
      }
    }
 
  </script>
 
  <body>
    Masquer/Afficher Col0 : <input type='checkbox' name='checkcol0' onClick="inverse('tb', 'col0')"; CHECKED><BR>
    Masquer/Afficher Col1 : <input type='checkbox' name='checkcol1' onClick="inverse('tb', 'col1')"; CHECKED><BR> 
    Masquer/Afficher Col2 : <input type='checkbox' name='checkcol2' onClick="inverse('tb', 'col2')"; CHECKED><BR> 
    Masquer/Afficher Col3 : <input type='checkbox' name='checkcol3' onClick="inverse('tb', 'col3')"; CHECKED><BR>
    <BR>     
    <table border="1" id="tb">
      <tr>
        <td name="col0">Nom</td>
        <td name="col1">Prénom</td>
        <td name="col2">Age</td>
        <td name="col3">Ville</td>
     </tr>
     <tr>
        <td name="col0">Dupont</td>
        <td name="col1">Henri</td>
        <td name="col2">25</td>
        <td name="col3">Rennes</td>
     </tr>
     <tr>
        <td name="col0">Durand</td>
        <td name="col1">Paul</td>
        <td name="col2">35</td>
        <td name="col3">Lyon</td>       
      </tr>
      <tr>
        <td name="col0">Martin</td>
        <td name="col1">Claude</td>
        <td name="col2">40</td>
        <td name="col3">Paris</td>
      </tr>  
    </table> 
  </body>
 
</html>

Merci encore Vermine et Bovino.

Snheed

**vermine** · 22/10/2009, 11h50

Code :

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

onClick="inverse('tb', 'col3');" CHECKED><BR>

Afficher/Masquer les colonnes d'un tableau

JavaScript

Vue hybride

Discussions similaires

Partager

Partager