Masquer une colonne dans un tableau sous ffx

**Mengué georges** · 13/02/2010, 19h28

Bonjour

Voilà 2 jours que je galère, pas moyen de masquer une colonne dans un tableau via js sous firefox, pourtant on ne peut faire plus simple:

Code :

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

1
2
3
4
function masqueCol(){
colTab = document.getElementById("col8");
colTab.style.display = 'none';
}

Merci

**SpaceFrog** · 13/02/2010, 19h49

pour masquer la colonne il faut masquer tous les td de la colonne ...

un id devant etre unique sur la page passe plutot par la collection des td en bouclant dessus en commençant par l'indice de la colonne et avec un pas correspondant au nombre de colonnes..

sinon avec les selecteurs de jquery

Code :

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

$('#mytable tbody td:nth-col(indice)');

**Mengué georges** · 13/02/2010, 20h12

C'est bien ce que j'ai pu trouver après recherches mais le pb c'est que ça a fonctionné et ça na marche plus. Par contre sous ie6 pas de pb

**javatwister** · 14/02/2010, 08h39

ou travaille avec des listes...

**Mengué georges** · 14/02/2010, 08h54

des listes ???

Expliques moi un peu

**javatwister** · 14/02/2010, 09h04

eh bien je parle des listes <ul> et de leurs éléments <li>, qui te permettent de gérer des colonnes facilement;

**Mengué georges** · 14/02/2010, 11h29

La je ne pige pas:
Je ne vois pas comment masquer des colonnes avec des listes dans un tableau. Où je les places ?

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
<html>
  <head>
    <title>Test</title>
  </head>
  <body>
 <table border="1">
     <colgroup>
        <col id="col1" width="200">
        <col id="col2" width="200">
        <col id="col3" width="200">
     </colgroup>
    <tr>
      <td>1.1</td>
      <td>1.2</td>
      <td>1.3</td>
    </tr>
	<tr>
	  <td>2.1</td>
      <td>2.2</td>
      <td>2.3</td>
    </tr>
	<tr>
      <td>3.1</td>
      <td>3.2</td>
      <td>3.3</td>
    </tr>
</table>
</body>
</html>

j"ai besoin d'un peu plus d'explications.
Merci

**SpaceFrog** · 14/02/2010, 11h43

JT proposer des remplacer ta structure de table par une structure de ul et de li ...

moi je proposais tout simplement ceci :

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
<html>
  <head>
    <title>Test</title>
    <script type='text/javascript'>
    function foo (col){
 
    var tabCols= document.getElementsByTagName('td')
 
    for (i=col; i< tabCols.length; i=i+3){
     tabCols[i].style.display='none'
     }
     }
 
     function bar (){
 
    var tabCols= document.getElementsByTagName('td')
 
    for (i=0; i< tabCols.length; i++){
     tabCols[i].style.display='table-cell'
     }
     }
   </script>
 
 
  </head>
  <body>
 <table border="1">
    <tr>
      <td>1.1</td>
      <td>1.2</td>
      <td>1.3</td>
    </tr>
	<tr>
	  <td>2.1</td>
      <td>2.2</td>
      <td>2.3</td>
    </tr>
	<tr>
      <td>3.1</td>
      <td>3.2</td>
      <td>3.3</td>
    </tr>
</table>
<input type='button' onclick="foo(0)" value="colonne 0" /><br/>
<input type='button' onclick="foo(1)" value="colonne 1" /><br/>
<input type='button' onclick="foo(2)" value="colonne 2" /><br/>
<input type='button' onclick="bar()" value="R.A.Z" /><br/>
</body>
</html>

**javatwister** · 14/02/2010, 11h47

je veux dire que ton "tableau" ne doit pas être un <table> mais une série de <ul>;

que des avantages!

exemple:

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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>...</title>
 
 
 
<style type="text/css">
 
#cadre ul {
border:1px solid;
height:200px;
float:left;
line-height:20px;
list-style-type:none;
margin:1px;
padding:0px;
}
 
.ul1 {
width:100px;
overflow:auto;
background-color:cyan;
}
 
#cadre li {
border-bottom:1px solid #000000;
}
 
.tit {
height:20px;
border-bottom:1px solid;
background-color:#ffff00;
font-weight:bold;
text-align:center;overflow:hidden;
}
 
</style>
 
 
 
</head>
<body>
 
 
 
<div id="cadre">
<ul class="ul1">
  <li class="tit">titre 1</li>
  <li>un</li>
  <li>deux</li>
  <li>trois</li>
  <li>quatre</li>
  <li>cinq</li>
  <li>un</li>
  <li>deux</li>
  <li>trois</li>
  <li>quatre</li>
  <li>cinq</li>
  <li>un</li>
  <li>deux</li>
  <li>trois</li>
  <li>quatre</li>
  <li>cinq</li>
  <li>un</li>
  <li>deux</li>
  <li>trois</li>
  <li>quatre</li>
  <li>cinq</li>
  <li>un</li>
  <li>deux</li>
  <li>trois</li>
  <li>quatre</li>
  <li>cinq</li>
  <li>un</li>
  <li>deux</li>
  <li>trois</li>
  <li>quatre</li>
  <li>cinq</li>
  <li>un</li>
  <li>deux</li>
  <li>trois</li>
  <li>quatre</li>
  <li>cinq</li>
 </ul>
 
 <ul class="ul1">
  <li class="tit">titre 2</li>
  <li>six</li>
  <li>sept</li>
  <li>huit</li>
  <li>neuf</li>
  <li>dix</li>
  <li>six</li>
  <li>sept</li>
  <li>huit</li>
  <li>neuf</li>
  <li>dix</li>
  <li>six</li>
  <li>sept</li>
  <li>huit</li>
  <li>neuf</li>
  <li>dix</li>
  <li>six</li>
  <li>sept</li>
  <li>huit</li>
  <li>neuf</li>
  <li>dix</li>
  <li>six</li>
  <li>sept</li>
  <li>huit</li>
  <li>neuf</li>
  <li>dix</li>
  <li>six</li>
  <li>sept</li>
  <li>huit</li>
  <li>neuf</li>
  <li>dix</li>
  <li>six</li>
  <li>sept</li>
  <li>huit</li>
  <li>neuf</li>
  <li>dix</li>
 </ul>
 
 <ul class="ul1">
  <li class="tit">titre 3</li>
  <li>onze</li>
  <li>douze</li>
  <li>treize</li>
  <li>quatorze</li>
  <li>quinze</li>
  <li>onze</li>
  <li>douze</li>
  <li>treize</li>
  <li>quatorze</li>
  <li>quinze</li>
  <li>onze</li>
  <li>douze</li>
  <li>treize</li>
  <li>quatorze</li>
  <li>quinze</li>
  <li>onze</li>
  <li>douze</li>
  <li>treize</li>
  <li>quatorze</li>
  <li>quinze</li>
  <li>onze</li>
  <li>douze</li>
  <li>treize</li>
  <li>quatorze</li>
  <li>quinze</li>
  <li>onze</li>
  <li>douze</li>
  <li>treize</li>
  <li>quatorze</li>
  <li>quinze</li>
 </ul>
</div>
 
 
</body>
 
</html>

**javatwister** · 14/02/2010, 11h51

oui, Spaf, avec l'inconvénient des boucles; pas négligeable si tu as des colonnes de 2000 lignes;

**Mengué georges** · 14/02/2010, 16h09

Hé oui pas 2000 lignes mais entre 200 et 500 et 10 à 150 colonnes.
Afin d'en faciliter la gestion via ajax, je veux rester en tableau.
Pour

SpaceFrog

, j'avais pigé mais on ne sais jamais s'il y avait eu une autre solution.
Tout ceci c'était pour faire du grouper / dégrouper de colonnes

Je vous remercie

**javatwister** · 14/02/2010, 16h22

Envoyé par Mengué georges

Afin d'en faciliter la gestion via ajax, je veux rester en tableau.

superstition!

enfin bon

**SpaceFrog** · 14/02/2010, 18h07

les selecteurs de jquery fonctionnent hors tableau ...

Code :

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

>$("ul li:nth-child(2)")

par contre pour ce qui est de la rapidité je ne sais pas

**javatwister** · 15/02/2010, 08h57

Envoyé par SpaceFrog

par contre pour ce qui est de la rapidité je ne sais pas

eh bien moi non plus étant une bille dans le domaine de la chronométrie;

mais supprimer 1 élément qui en contient 200 ou 200 éléments distincts dans une boucle, ça fait une diffférence;

Masquer une colonne dans un tableau sous ffx

JavaScript

Discussions similaires

Partager

Partager