Cacher certaines colonnes d'un tableau en javascript

**Raiden1234** · 29/05/2008, 16h03

Bonjour,

Alors voila j'ai un tableau qui se trouve dans une s:form et que je remplis a l'aide d'iterators et j'aimerais en cliquant sur un lien, cacher certaines colonnes de ce tableau voila c'est tout.

J'imagine qu'il faut le faire en javascript mais je ne sais pas comment gerer cela.

Merci a vous.

**tchize_** · 29/05/2008, 16h20

en javascript: changer le style display en none pour chaque cellule concerné. Ca nécessite d'utiliser document.getElementById("no_du_tableau") puis de récupérer les tr qui en sont child (attention ,t'as peut-être un tbody intermédiaire) et que chaque tr, changer le style du nième td qui en est child.

Je te suggère de faire des recherche sur dom javascript pour trouver comment manipuler le dom en javascript.

**Raiden1234** · 30/05/2008, 10h04

Oui en effet j'ai un tbody intermediaire.

Ok merci je vais regarder ca

**Alyx²** · 02/06/2008, 10h00

Salut,

Pour ce type de méthode en javascript, tu peux jetter un oeil au framework Prototype :
http://www.prototypejs.org/
http://www.prototypejs.org/api

Avec, il te suffirait simplement de mettre sur ton bouton:
- Pour montrer et cacher à chaque click:

Code :

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

onclick="javascript:$('ID_A_CACHER').toggle();"

- Pour montrer simplement:

Code :

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

onclick="javascript:$('ID_A_CACHER').show();"

- Pour cacher simplement :

Code :

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

onclick="javascript:$('ID_A_CACHER').hide();"

Le $(...) est simplement un raccourci de prototype pour le document.getElementById(ID).

Evidemment, ne pas oublier de déclarer prototype en haut de ta jsp

Code :

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

1
2
3
<head>
   <script language="javascript" src="<%=request.getContextPath()%>/script/prototype.js"></script>     
</head>

Il y a quelques méthodes sympathiques dans ce framework qui facilitent la vie

Bonne journée.

**Raiden1234** · 03/06/2008, 23h27

Salut,

Je te remercie de ta réponse très complète

J'ai téléchargé ce fichier javascript, je l'ai placé au bon endroit et importé.

Cependant, ça ne fonctionne malheureusement pas chez moi

J'espère que c'est pas parce que j'ai personnalisé mon tableau avec du css.

Je fais comme 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
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
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
 
<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
 
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Homepage</title>
        <script language="javascript" src="prototype.js"></script>
        <script language="Javascript">
            function showFull() {
                document.getElementById('a').style.display='none';  
                document.getElementById('b').style.display='block';  
            }
            function showSimple() {
                document.getElementById('b').style.display='none';  
                document.getElementById('a').style.display='block';  
            }
 
 
        </script>
 
 
 
        <s:head />
    </head>
    <body>
        <h2>List of Members detailed</h2>
 
        <small>
            <s:property value="message"/>
            <s:url id="logOff" action="Logoff" namespace="/login"/>
            (<s:a href="%{logOff}" theme="simple">logoff</s:a>)
        </small>
 
        <br/><br/>
 
        <h2>Register</h2>
        <hr/>      
        <ul>
            <li><s:a href="javascript:showSimple()">Show simplified table</s:a>
            <li><s:a href="javascript:showFull()">Show full table</s:a>
            <li><s:a href="javascript:$('ca').hide();">MAGIC JAVASCRIPT</s:a>
            <s:url id="init" action="Init" namespace="/register" />
            <li><s:a href="%{init}">Add a new person</s:a>
        </ul>
        <hr/>
        <s:form theme="simple" namespace="/register">
 
            <s:actionerror />
            <s:fielderror />
            <br/>
 
            <%-- SIMPLE TABLE --%>
 
            <div id="a">
 
                <table style="border:#DDEEFF 2px solid; border-collapse:separate; border-spacing:2px; margin:auto;">
 
                    <caption style="background-color:#DDEEFF; font-size:1.1em; font-weight:lighter; margin:auto;">List of SUMS users</caption>
 
 
 
                    <thead>
                        <tr>
 
                                <th id="ca" style="color:#996600; background-color:#FFCC66; border:#FFCC66 1px solid; font-variant:small-caps; font-size:0.8em; letter-spacing:1px;">Actions</th> 
 
                            <th style="color:#996600; background-color:#FFCC66; border:#FFCC66 1px solid; font-variant:small-caps; font-size:0.8em; letter-spacing:1px;">
                                <s:url id="sortasc" action="DisplayMembers">
                                    <s:param name="sorting" value="'status.name'" />
                                    <s:param name="sense" value="'asc'" />
                                </s:url>
                                <s:a href="%{sortasc}" theme="simple" ><img src="/sumsf/images/sortasc.gif" width="12" height="12" alt="Sort by ascending"/></s:a>
 
                                <s:url id="sortdesc" action="DisplayMembers">
                                    <s:param name="sorting" value="'status.name'" />
                                    <s:param name="sense" value="'desc'" />
                                </s:url>
                                <s:a href="%{sortdesc}" theme="simple" ><img src="/sumsf/images/sortdesc.gif" width="12" height="12" alt="Sort by descending"/></s:a>    
                                <br/>Status  
                            </th>
                            <th style="color:#996600; background-color:#FFCC66; border:#FFCC66 1px solid; font-variant:small-caps; font-size:0.8em; letter-spacing:1px;">
                                <s:url id="sortasc" action="DisplayMembers">
                                    <s:param name="sorting" value="'username'" />
                                    <s:param name="sense" value="'asc'" />
                                </s:url>
                                <s:a href="%{sortasc}" theme="simple" ><img src="/sumsf/images/sortasc.gif" width="12" height="12" alt="Sort by ascending"/></s:a>
 
                                <s:url id="sortdesc" action="DisplayMembers">
                                    <s:param name="sorting" value="'username'" />
                                    <s:param name="sense" value="'desc'" />
                                </s:url>
                                <s:a href="%{sortdesc}" theme="simple" ><img src="/sumsf/images/sortdesc.gif" width="12" height="12" alt="Sort by descending"/></s:a>    
                                <br/>Username
                            </th>
                            <th style="color:#996600; background-color:#FFCC66; border:#FFCC66 1px solid; font-variant:small-caps; font-size:0.8em; letter-spacing:1px;">
                                <s:url id="sortasc" action="DisplayMembers">
                                    <s:param name="sorting" value="'forename'" />
                                    <s:param name="sense" value="'asc'" />
                                </s:url>
                                <s:a href="%{sortasc}" theme="simple" ><img src="/sumsf/images/sortasc.gif" width="12" height="12" alt="Sort by ascending"/></s:a>
 
                                <s:url id="sortdesc" action="DisplayMembers">
                                    <s:param name="sorting" value="'forename'" />
                                    <s:param name="sense" value="'desc'" />
                                </s:url>
                                <s:a href="%{sortdesc}" theme="simple" ><img src="/sumsf/images/sortdesc.gif" width="12" height="12" alt="Sort by descending"/></s:a>
                                <br/>Forename
                            </th>
                            <th style="color:#996600; background-color:#FFCC66; border:#FFCC66 1px solid; font-variant:small-caps; font-size:0.8em; letter-spacing:1px;">
                                <s:url id="sortasc" action="DisplayMembers">
                                    <s:param name="sorting" value="'surname'" />
                                    <s:param name="sense" value="'asc'" />
                                </s:url>
                                <s:a href="%{sortasc}" theme="simple" ><img src="/sumsf/images/sortasc.gif" width="12" height="12" alt="Sort by ascending"/></s:a>
 
                                <s:url id="sortdesc" action="DisplayMembers">
                                    <s:param name="sorting" value="'surname'" />
                                    <s:param name="sense" value="'desc'" />
                                </s:url>
                                <s:a href="%{sortdesc}" theme="simple" ><img src="/sumsf/images/sortdesc.gif" width="12" height="12" alt="Sort by descending"/></s:a>
                                <br/>Surname                            
                            </th>
 
                            <th style="color:#996600; background-color:#FFCC66; border:#FFCC66 1px solid; font-variant:small-caps; font-size:0.8em; letter-spacing:1px;">
                                <s:url id="sortasc" action="DisplayMembers">
                                    <s:param name="sorting" value="'cohort.title'" />
                                    <s:param name="sense" value="'asc'" />
                                </s:url>
                                <s:a href="%{sortasc}" theme="simple" ><img src="/sumsf/images/sortasc.gif" width="12" height="12" alt="Sort by ascending"/></s:a>
 
 
                                <s:url id="sortdesc" action="DisplayMembers">
                                    <s:param name="sorting" value="'cohort.title'" />
                                    <s:param name="sense" value="'desc'" />
                                </s:url>
                                <s:a href="%{sortdesc}" theme="simple" ><img src="/sumsf/images/sortdesc.gif" width="12" height="12" alt="Sort by descending"/></s:a>    
                                <br/>Cohort                            
                            </th>
                            <th style="color:#996600; background-color:#FFCC66; border:#FFCC66 1px solid; font-variant:small-caps; font-size:0.8em; letter-spacing:1px;">
                                <s:url id="sortasc" action="DisplayMembers">
                                    <s:param name="sorting" value="'confirmationDate'" />
                                    <s:param name="sense" value="'asc'" />
                                </s:url>
                                <s:a href="%{sortasc}" theme="simple" ><img src="/sumsf/images/sortasc.gif" width="12" height="12" alt="Sort by ascending"/></s:a>
 
 
                                <s:url id="sortdesc" action="DisplayMembers">
                                    <s:param name="sorting" value="'confirmationDate'" />
                                    <s:param name="sense" value="'desc'" />
                                </s:url>
                                <s:a href="%{sortdesc}" theme="simple" ><img src="/sumsf/images/sortdesc.gif" width="12" height="12" alt="Sort by descending"/></s:a>    
                                <br/>Activation                            
                            </th>
                            <th style="color:#996600; background-color:#FFCC66; border:#FFCC66 1px solid; font-variant:small-caps; font-size:0.8em; letter-spacing:1px;">Modification</th>
                        </tr>
                    </thead>
 
                    <tfoot>
                        <tr>
                            <td colspan="8" style="font-size:0.7em; background-color:#FFCC66; color:#996600; letter-spacing:1px;">
                                <s:submit action="Delete" value="Delete" theme="simple"/>
                                <s:submit action="AdminActivate" value="Activate" theme="simple"/>
                                <s:submit action="SuspendForm" value="Suspend" theme="simple"/>
                                <s:submit action="Unsuspend" value="Unsuspend" theme="simple"/>
                            </td>
                        </tr>
                    </tfoot>
 
                    <tbody>
 
                        <s:iterator value="membersList">
                            <tr onmouseover="this.style.backgroundColor='#DDEEFF'" onmouseout="this.style.backgroundColor='#F4FAFD'">
                                <td style="font-size: 0.8em; border:#DDEEFF 1px solid; padding-left:10px;"><s:checkbox name="checkbox" fieldValue="%{id}" value="false" theme="simple" /></td>
                                <td style="font-size: 0.8em; border:#DDEEFF 1px solid; padding-left:10px;">
                                    <s:if test="%{status.name=='Staff'}">
                                        <font color="#000099"><s:property value="status.name" /></font>
                                    </s:if>
                                    <s:elseif test="%{status.name=='Student'}">
                                        <font color="#339933"><s:property value="status.name" /></font>
                                    </s:elseif>
                                    <s:else>
                                        <font color="#CC6600"><s:property value="status.name" /></font>
                                    </s:else>
                                </td>
                                <td style="font-size: 0.8em; border:#DDEEFF 1px solid; padding-left:10px;"><s:property value="username"/></td>
                                <td style="font-size: 0.8em; border:#DDEEFF 1px solid; padding-left:10px;"><s:property value="forename" /></td>
                                <td style="font-size: 0.8em; border:#DDEEFF 1px solid; padding-left:10px;"><s:property value="surname" /></td>
 
                                <td style="font-size: 0.8em; border:#DDEEFF 1px solid; padding-left:10px;">
                                    <s:iterator value="cohort">
                                        <s:property value="title" /><br/>
                                    </s:iterator>                       
                                </td>
                                <td style="font-size: 0.8em; border:#DDEEFF 1px solid; padding-left:10px;">
 
                                    <s:if test="%{confirmationDate==null}">
                                        <font color="red">Not Active</font>
                                    </s:if>
                                    <s:else>
                                        <s:if test="%{status.name=='Staff' && staff.activation==0}">
                                            <font color="red">Not Active</font>
                                        </s:if>
                                        <s:else>
                                            <font color="green">Active</font>
                                        </s:else>
                                    </s:else>
 
 
                                </td>
                                <td style="font-size: 0.8em; border:#DDEEFF 1px solid; padding-left:10px;">
                                    <s:url id="alter" action="FullUpdateForm">
                                        <s:param name="id" value="%{id}" />
                                    </s:url>
                                    <s:a href="%{alter}" theme="simple">Edit</s:a>
                                </td>
                            </tr>
                        </s:iterator>
 
                    </tbody>
                </table>  
 
            </div>  
 
            <br/>
            <hr/>
 
            <br/><br/>
            <s:url id="backHome" action="BackHome" namespace="/login"/>
            <s:a href="%{backHome}">Back to home</s:a>
        </s:form>
        <br/><br/><br/>
 
 
    </body>
</html>

Ce code est long mais c'est pour bien montrer comment j'ai construit mon tableau.

J'ai fais un test sur le premier th du premier tableau tout en haut en affectant id="ca" au th.

J'ai aussi essayé entre des div et ca ne marchait pas non plus.

Que se passe-t-il ?

PS : le fichier javascript se trouve au meme endroit que ma page.

**Alyx²** · 04/06/2008, 10h54

Salut,

Tu es sûr que ton script est reconnu?
Je ne sais pas trop comment sont gérés les adresses. Logiquement, si tu tapes http://localhost:8080/tonAppli/prototype.js dans ton navigateur il devrait te le retrouver.
Si ce n'est pas le cas, je ne suis pas sure que ton adresse soit bonne:

Code :

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

<script language="javascript" src="prototype.js"></script>

Sinon, j'ai testé chez moi sur des <th>, <td>, <table> avec CSS, ca marche à chaque fois. Par contre tu vas galérer avec les <td> pour cacher la colonne en entier :s Chaque td devrait avoir une id différente !
Ca me parait bien compliqué.

Cacher certaines colonnes d'un tableau en javascript

Struts 2 Java

Vue hybride

Discussions similaires

Partager

Partager