Afficher/Masquer une colonne d'un tableau

**Budy123** · 16/12/2011, 12h42

Bonjour,

J'ai récupéré le code ci-dessous qui fonctionne très bien, simplement je souhaiterais que certaines colones soient masquées dès l'ouverture de la page , j'ai essayé de faire des modifications, sans succes, pourriez vous m'éclairer.
Merci par avance.

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

**SpaceFrog** · 16/12/2011, 14h14

ben fais toi une fonction qui le fait ...

Code :

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

1
2
3
4
5
6
 
function initTab(tab, cols){
for(idx in cols) {
           inverse(tab, cols[idx])
}
}

que tu lances dans le onload

Code :

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

<body onload="initTab('tb',['col1','col2]);" >

**Bovino** · 16/12/2011, 14h21

J'ai récupéré le code ci-dessous qui fonctionne très bien

Il date quand même pas mal ton script...

Par exemple, pourquoi cette mystique condition :

Code :

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

1
2
3
4
5
      if (nom == 'Netscape'){
        var detail=document.getElementsByName(COL);
      } else {
        var detail=getCellByName(table,COL);
      }

???

**Budy123** · 16/12/2011, 15h50

Bovino je ne serais pas reprondre a tes questions je suis pas tout a fait à l'aise avec javascript.

Mais effectivement en plaçant la demande dans un OnLoad ca fonctionne très.

Merci...

Code :

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

1
2
 
<body onload="inverse('tb', 'col0');inverse('tb', 'col1');" >

Afficher/Masquer une colonne d'un tableau

JavaScript

Discussions similaires

Partager

Partager