Afficher/Masquer les colonnes d'un tableau

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

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, 12h11

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, 12h13

ajoute un attribut style à tes cellules!

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

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

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

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, 12h37

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, 12h38

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, 12h48

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, 12h50

Code :

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

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

**Matthieu2000** · 22/10/2009, 12h52

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
function inverse(ID, COL){
      var table = document.getElementById(ID);      
	  var detail=getCellByName(table,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";
      }
    }
 
	function getCellByName(tab, nom){
		var cols=new Array();
		cellules=tab.getElementsByTagName("td");
		for(var i = 0; i < cellules.length; ++i){
			if(cellules[i].name==nom){
				cols[cols.length]=cellules[i];
			}
		}
		return cols;
	}

**snheed** · 22/10/2009, 13h00

Merci Vermine, effectivement, je n'avais pas vu cette petite erreurs. Malheureusement, la correction ne règle rien.

Matthieu2000, merci pour ta réponse. Je viens de la tester à l'instant. Elle fonctionne parfaitement sous IE8 mais par contre pas sous Firefox.

J'en demande peut-être un peu trop... C'est peut-être pas possible de faire fonctionner mon petit bout de code sur ces deux navigateurs...

A ce moment là, je me contenterais du code de Matthieu...

La dernière version de 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
53
54
55
56
57
58
59
60
61
62
63
 
<html>
 
  <script type="text/javascript">
 
    function inverse(ID, COL){
      var table = document.getElementById(ID);      
	    var detail=getCellByName(table,COL);
      if (detail[0].style.display == ""){
        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 = "";
      }
    }
 
	  function getCellByName(tab, nom){
		  var cols=new Array();
		  cellules=tab.getElementsByTagName("td");
		  for(var i = 0; i < cellules.length; ++i){
			  if(cellules[i].name==nom){
				  cols[cols.length]=cellules[i];
			  }
		  }
		  return cols;
	  }
 
  </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

Snheed

**snheed** · 22/10/2009, 13h20

Bon ok, vous allez trouver que c'est de la bidouille mais étant donné que j'avais une solution qui fonctionnait sous Firefox et une autre pour IE8, je me suis dit qu'il suffirait d'appeler la bonne fonction en fonction du navigateur...

Voici donc un code qui fonctionne pour les deux navigateurs :

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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
 
<html>
 
  <script type="text/javascript">
 
    function inverse(ID, COL){
      var table = document.getElementById(ID);      
      var nom = navigator.appName;
      if (nom == 'Netscape'){
        var detail=document.getElementsByName(COL);
      } else {
        var detail=getCellByName(table,COL);
      }
      if (detail[0].style.display == ""){
        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 = "";
      }
    }
 
	  function getCellByName(tab, nom){
		  var cols=new Array();
		  cellules=tab.getElementsByTagName("td");
		  for(var i = 0; i < cellules.length; ++i){
			  if(cellules[i].name==nom){
				  cols[cols.length]=cellules[i];
			  }
		  }
		  return cols;
	  }
 
  </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>

On ne sait jamais, peut être que quelqu'un voudra faire la même chose que moi un jour et il n'aura pas besoin de chercher

Merci encore à tous pour votre aide.

Snheed

Afficher/Masquer les colonnes d'un tableau

JavaScript

Discussions similaires

Partager

Partager