Masquer une colonne dans un tableau sous ffx

Version imprimable

13/02/2010, 19h28
Mengué georges

1 pièce(s) jointe(s)

Masquer une colonne dans un tableau sous ffx
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:

1 2 3 4 function masqueCol(){ colTab = document.getElementById("col8"); colTab.style.display = 'none'; }
Merci
13/02/2010, 19h49
SpaceFrog

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:

$('#mytable tbody td:nth-col(indice)');
13/02/2010, 20h12
Mengué georges

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
14/02/2010, 08h39
javatwister

ou travaille avec des listes...
14/02/2010, 08h54
Mengué georges

des listes ???

Expliques moi un peu
14/02/2010, 09h04
javatwister

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

La je ne pige pas:
Je ne vois pas comment masquer des colonnes avec des listes dans un tableau. Où je les places ?
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 <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

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

moi je proposais tout simplement ceci :

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

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

que des avantages!

exemple:

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

14/02/2010, 11h51
javatwister

oui, Spaf, avec l'inconvénient des boucles; pas négligeable si tu as des colonnes de 2000 lignes;
14/02/2010, 16h09
Mengué georges

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

Citation:

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
14/02/2010, 16h22
javatwister

Citation:

Envoyé par Mengué georges

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

superstition!

enfin bon
14/02/2010, 18h07
SpaceFrog

les selecteurs de jquery fonctionnent hors tableau ...

Code:

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

par contre pour ce qui est de la rapidité je ne sais pas
15/02/2010, 08h57
javatwister

Citation:

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