Afficher/Masquer les colonnes d'un tableau

Version imprimable

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 :

Citation:

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

Voici mon code :

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

22/10/2009, 11h11
vermine

Bonjour,

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

Code:

table-cell

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

Code:

block //Peut-être inline, selon le contenu des td.
22/10/2009, 11h13
Matthieu2000

ajoute un attribut style à tes cellules!
22/10/2009, 11h26
Bovino

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

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:

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.

22/10/2009, 11h37
vermine

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:

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

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

Code:

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

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 !

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:

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

22/10/2009, 11h50
vermine

Code:

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

Code:

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

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:

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

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:

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