Parcourir les lignes d'un tableau à partir d'une ligne cliquée

**rambc** · 18/11/2010, 16h35

Bonjour,
j'ai le code suivant qui m'affiche/efface juste la 1ère ligne après celle cliquée. Je sais que c'est normal mais j'ai besoin de plus.

Code html :

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
 
<!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" lang="fr">
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"/>
 
        <script type="text/javascript">
$(document).ready(function(){
// We catch the event "click on a span with class starting with ''fold''".
    $(".fold_start").click(function(){
// We hide/show the div giving the subblock just after the line clicked.
        $(this).next().toggle();
    });
});
        </script>
    </head>
 
<body>
    <code>
        <table >
            <tr class="fold_start" style="cursor:pointer;">
                <td><pre>01</pre></td>
                <td><pre> - </pre></td>
                <td><pre>def function(bidon):</pre></td>
            </tr>
            <tr>
                <td><pre>02</pre></td>
                <td></td>
                <td><pre>    """</pre></td>
            </tr>
            <tr>
                <td><pre>03</pre></td>
                <td></td>
                <td><pre>    Un petit commentaire...</pre></td>
            </tr>
            <tr>
                <td><pre>04</pre></td>
                <td></td>
                <td><pre>    """</pre></td>
            </tr>
            <tr>
                <td><pre>05</pre></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td><pre>06</pre></td>
                <td></td>
                <td><pre>    print('Cette fonction est bidon...')</pre></td>
            </tr>
            <tr class="fold_start" style="cursor:pointer;">
                <td><pre>07</pre></td>
                <td><pre> - </pre></td>
                <td><pre>    for i in range(5):</pre></td>
            </tr>
            <tr>
                <td><pre>08</pre></td>
                <td></td>
                <td><pre>        print(i)</pre></td>
            </tr>
            <tr>
                <td><pre>09</pre></td>
                <td></td>
                <td><pre>        print(i**2)</pre></td>
            </tr>
            <tr class="fold_end">
                <td><pre>10</pre></td>
                <td></td>
                <td><pre># Fin du code...</pre></td>
            </tr>
        </table>
    </code>
</body>

Voilà ce que j'aimerais faire. Lorsque l'utilisateur clique sur une ligne de type "fold_start", je voudrais pouvoir parcourir toutes les lignes qui suivent pour les effacer une à une suivant les deux règles suivantes (je saurais faire cela seul je pense) :

Tant qu'une ligne n'est pas de type "fold_end", on l'efface. Au passage, on compte aussi les lignes de type "fold_start".
Si on tombe sur une ligne de type "fold_end", on s'arrête sauf si le nombre de lignes de type "fold_start" rencontrées n'est pas zéro.

Côté jQuery, j'ai donc besoin de deux choses :

Parcourir dans le tableau toutes les lignes se trouvant après la ligne cliquée.
Récupérer le nom de la classe de la ligne "parcourue" si elle en a une.

**gwinyam** · 18/11/2010, 16h42

1) Avec les sélecteurs jQuery, tu peux naviguer via la méthode .next(), ça répond certainement à ton besoin.

Quand tu es sur ta ligne "fold_start", tu regardes la ligne suivante, si c'est une ligne banale, tu la dégages (.remove()). Si c'est une "fold_end", tu sors.

2) Là t'as juste besoin de .attr("class"), ça renvoie la valeur de l'attibut class. Si il n'y en a pas, je crois que ça renvoie une chaine vide ou null. A tester.

**rambc** · 18/11/2010, 16h45

Merci.

Ok pour le 1er point mais dans ce cas comment vais-je repérer que je sors du tableau ?

PS : tu m'en as appris une bonne. Je ne savais pas que Dark Vador était noir. En plus, il a pris du poids.

**gwinyam** · 18/11/2010, 16h50

Ah bonne question. Là à chaud je sais pas et j'ai pas accès à la doc jquery au boulot.
Je pense que tu dois pouvoir tester si tu rencontres un </table>. Sinon, tu forces à mettre un fold_end à la fin du tableau. Ce qui ne me semble pas totalement inutile de ce que j'ai compris.

PS: Ouais, je suis désolé de casser un grand mystère de la vie, mais il fallait le révéler^^ (en réalité, c'est Gnarls Barkley sur scène, il a aussi fait des photos à la Matrix

)

**rambc** · 18/11/2010, 16h53

Envoyé par gwinyam

Ah bonne question. Là à chaud je sais pas et j'ai pas accès à la doc jquery au boulot.
Je pense que tu dois pouvoir tester si tu rencontres un </table>. Sinon, tu forces à mettre un fold_end à la fin du tableau. Ce qui ne me semble pas totalement inutile de ce que j'ai compris.

Je ne vais pas mettre un "fold_end" du fait des blocs imbriqués mais du coup un listing_end fera l'affaire. Je code ceci de suite, je poste ensuite ici, et pour finir j'irais nager (pour cette dernière info, tout le monde s'en fout mais c'est pour m'auto-motiver...)

**gwinyam** · 18/11/2010, 17h18

T'as oublié une étape entre la fin du codage et la piscine:
- Cliquer sur "Résolu"

**rambc** · 18/11/2010, 17h44

Grâce aux indications de gwinyam, et je l'en remercie grandement

, je suis arrivé à ce que je voulais :

Code html :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
 
<!--
Sources:
    http://www.developpez.net/forums/d629718/webmasters-developpement-web/javascript/bibliotheques-frameworks/jquery/changer-nom-class-clic-jquery/#post3711520
    http://www.developpez.net/forums/d1001334/webmasters-developpement-web/javascript/bibliotheques-frameworks/jquery/parcourir-lignes-tableau-partir-ligne-cliquee/#post5600151
-->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"/>
 
        <script type="text/javascript">
$(document).ready(function(){
    $('tr[class^="fold_start"]').click(function(){
        goToNext = true;
        nbOfBlocksMet = 1;
 
        if($(this).attr("class") == "fold_start_closed"){
            showLine = true;
            $(this).addClass("fold_start_opened").removeClass("fold_start_closed");
        }else{
            showLine = false;
            $(this).addClass("fold_start_closed").removeClass("fold_start_opened");
        }
 
 
        lastLine = $(this)
        while(goToNext){
            nextLine = lastLine.next();
 
            if(nextLine.attr("class") == "listing_end"){
                if(showLine){
                    nextLine.show();
                }else{
                    nextLine.hide();
                }
                goToNext = false;
            }else if(nextLine.attr("class") == "fold_start"){
                nbOfBlocksMet += 1;
            }else if(nextLine.attr("class") == "fold_end"){
                if(nbOfBlocksMet == 0){
                    goToNext = false;
                }
                nbOfBlocksMet -= 1;
            }
 
 
            if(goToNext){
                if(showLine){
                    nextLine.show();
                }else{
                    nextLine.hide();
                }
                lastLine = nextLine;
            }
        }
    });
});
        </script>
    </head>
 
<body>
    <code>
        <table >
            <tr class="fold_start_opened" style="cursor:pointer;">
                <td><pre>01</pre></td>
                <td><pre> - </pre></td>
                <td><pre>def function(bidon):</pre></td>
            </tr>
            <tr class="">
                <td><pre>02</pre></td>
                <td></td>
                <td><pre>    """</pre></td>
            </tr>
            <tr class="">
                <td><pre>03</pre></td>
                <td></td>
                <td><pre>    Un petit commentaire...</pre></td>
            </tr>
            <tr class="">
                <td><pre>04</pre></td>
                <td></td>
                <td><pre>    """</pre></td>
            </tr>
            <tr class="">
                <td><pre>05</pre></td>
                <td></td>
                <td></td>
            </tr>
            <tr class="">
                <td><pre>06</pre></td>
                <td></td>
                <td><pre>    print('Cette fonction est bidon...')</pre></td>
            </tr>
            <tr class="fold_start_opened" style="cursor:pointer;">
                <td><pre>07</pre></td>
                <td><pre> - </pre></td>
                <td><pre>    for i in range(5):</pre></td>
            </tr>
            <tr class="">
                <td><pre>08</pre></td>
                <td></td>
                <td><pre>        print(i)</pre></td>
            </tr>
            <tr class="">
                <td><pre>09</pre></td>
                <td></td>
                <td><pre>        print(i**2)</pre></td>
            </tr>
            <tr class="listing_end">
                <td><pre>10</pre></td>
                <td></td>
                <td><pre># Fin du code...</pre></td>
            </tr>
        </table>
    </code>
<div>
    Un petit exemple de listing....
</div>
</body>

Ce code n'est pas fini, et sûrement simplifiable. De plus, il ne garde pas la mémoire de ce qui a été ouvert/fermé précédemment, et dans mon exemple la dernière ligne est mal gérée. C'est juste de la programmation, je mettrais cela au point et posterais ici une méthode qui marche mieux quand j'aurais du temps libre.

jQuery est vraiment sympa à utiliser. Un bonheur !

Sur ce, de clore en partie ce post, cela me donne des envies de chlore...

**rambc** · 18/11/2010, 21h44

Le code ci-dessus permet d'avoir un système de plier-déplier, appelé "folding" en anglais, pour mettre en forme des listings. Pour utiliser ce code, il faudra traité au préalable les listings, je le ferais à titre perso. avec un script Python, pour les transformer en un tableau, donc la syntaxe est immédiat à saisir, qui pourra être traité par le code JS-jQuery ci-dessous.

TODO :

Il faut faire gérer l'affichage des signes + et - par jQuery. Comme cela, si JS n'est pas activé, on obtient juste un listing avec des lignes numérotées.
Colorer les lignes une sur deux. J'ai vu ceci dans le livre "JQuery" de Jonathan Chaffer et Karl Swedberg, donc il faudra juste que je trouve du temps libre...

MISE À JOUR DU DIMANCHE 21 NOVEMBRE 2010 :

La gestion des blocs de niveaux d'imbrication supérieurs à celui du type "un bloc dans un bloc" a été ajoutée. Il reste à chasser les bugs...

MISE À JOUR DU SAMEDI 20 NOVEMBRE 2010 :

La fonction changeSymbolFold est plus propre maintenant.

MISE À JOUR DU VENDREDI 19 NOVEMBRE 2010 :

Les sous-blocs de niveau 1, et uniquement eux, sont maintenant bien gérés.
Les symboles + deviennent des -, et vice versa, afin d'indiquer un bloc à déplier, ou à replier respectivement (la méthode employée manque d'élégance car on travaille sur le code html de la ligne permettant de plier/déplier un bloc : voir le post qui suit).

Code html :

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<!--
Sources:
    http://www.developpez.net/forums/d629718/webmasters-developpement-web/javascript/bibliotheques-frameworks/jquery/changer-nom-class-clic-jquery/#post3711520
    http://www.developpez.net/forums/d1001334/webmasters-developpement-web/javascript/bibliotheques-frameworks/jquery/parcourir-lignes-tableau-partir-ligne-cliquee/#post5600151
 
    http://api.jquery.com/html/
    http://api.jquery.com/children/
-->
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"/>
 
        <script type="text/javascript">
function hideOrShow(oneLine, showLine){
    if(showLine){
        oneLine.show();
    }else{
        oneLine.hide();
    }
}
 
function changeSymbolFold(oneLine, showLine){
    if(showLine){
        oneLineHtmlContent = '<pre> - <' + '/pre>';
    }else{
        oneLineHtmlContent = '<pre> + <' + '/pre>';
    }
 
    oneLine.children(".symbolFold").html(oneLineHtmlContent);
}
 
function changeClassFold(oneLine){
    if(oneLine.attr("class") == 'fold_start_closed'){
        showLine = true;
        oneLine
            .addClass("fold_start_opened")
            .removeClass("fold_start_closed")
    }else if(oneLine.attr("class") == 'fold_start_opened'){
        showLine = false;
        oneLine
            .addClass("fold_start_closed")
            .removeClass("fold_start_opened")
    }
 
    return showLine;
}
 
function mustGoToNext(oneLine,
                      levelOfTheBlock){
    goToNext = true;
 
    if(oneLine.attr("class") == "listing_end"){
        goToNext = false;
    }else if(oneLine.attr("class") == "fold_end"){
// "id" is used to know the levels of imbrication of blocks.
        if(levelOfTheBlock >= parseInt(oneLine.attr("id"))){
            goToNext = false;
        }
    }
 
    return goToNext;
}
 
function goToTheEndOfTheBlock(oneLine,
                              showLine){
    hideOrShow(oneLine, showLine);
    levelOfTheBlock = parseInt(oneLine.attr("id"));
 
    goToNext = mustGoToNext(oneLine, levelOfTheBlock);
    while(goToNext){
        oneLine = oneLine.next();
        goToNext = mustGoToNext(oneLine,
                                levelOfTheBlock);
    }
 
    if(oneLine.attr("class") == "fold_start_closed"){
        oneLine = goToTheEndOfTheBlock(oneLine,
                                       showLine);
    }
 
    return oneLine;
}
 
$(document).ready(function(){
    $('tr[class^="fold_start"]').click(function(){
        goToNext = true;
        nbOfBlocksMet = 0;
        showLine = changeClassFold($(this));
        currentLine = $(this);
        levelOfTheBlockClicked = parseInt(currentLine.attr("id"));
 
        changeSymbolFold(currentLine, showLine);
 
        while(goToNext){
            currentLine = currentLine.next();
 
            if(currentLine.attr("class") == "fold_start_closed"){
                currentLine = goToTheEndOfTheBlock(currentLine,
                                                   showLine);
            }else{
                hideOrShow(currentLine,
                           showLine);
            }
 
            goToNext = mustGoToNext(currentLine,
                                    levelOfTheBlockClicked);
        }
    });
});
        </script>
    </head>
 
 
    <body>
        <div>
Un petit exemple de listing....
        </div>
        <code>
            <table >
                <tr class="fold_start_opened" id= "0" style="cursor:pointer;">
                    <td><pre>01</pre></td>
                    <td class="symbolFold"><pre> - </pre></td>
                    <td><pre>def function(bidon):</pre></td>
                </tr>
                <tr class="">
                    <td><pre>02</pre></td>
                    <td></td>
                    <td><pre>    """</pre></td>
                </tr>
                <tr class="">
                    <td><pre>03</pre></td>
                    <td></td>
                    <td><pre>    Un petit commentaire...</pre></td>
                </tr>
                <tr class="">
                    <td><pre>04</pre></td>
                    <td></td>
                    <td><pre>    """</pre></td>
                </tr>
                <tr class="">
                    <td><pre>05</pre></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr class="">
                    <td><pre>06</pre></td>
                    <td></td>
                    <td><pre>    print('Cette fonction est bidon...')</pre></td>
                </tr>
                <tr class="fold_start_opened" id= "1" style="cursor:pointer;">
                    <td><pre>07</pre></td>
                    <td class="symbolFold"><pre> - </pre></td>
                    <td><pre>    for i in range(5):</pre></td>
                </tr>
                <tr class="">
                    <td><pre>08</pre></td>
                    <td></td>
                    <td><pre>        print(i)</pre></td>
                </tr>
                <tr class="fold_end" id="1">
                    <td><pre>09</pre></td>
                    <td></td>
                    <td><pre>        print(i**2)</pre></td>
                </tr>
                <tr class="">
                    <td><pre>10</pre></td>
                    <td></td>
                    <td><pre># Une autre boucle...</pre></td>
                </tr>
                <tr class="fold_start_opened" id= "1" style="cursor:pointer;">
                    <td><pre>11</pre></td>
                    <td class="symbolFold"><pre> - </pre></td>
                    <td><pre>    for k in range(5):</pre></td>
                </tr>
                <tr class="">
                    <td><pre>12</pre></td>
                    <td></td>
                    <td><pre>        print('='*k)</pre></td>
                </tr>
                <tr class="">
                    <td><pre>13</pre></td>
                    <td></td>
                    <td><pre># Un test dans une boucle...</pre></td>
                </tr>
                <tr class="fold_start_opened" id="2" style="cursor:pointer;">
                    <td><pre>14</pre></td>
                    <td class="symbolFold"><pre> - </pre></td>
                    <td><pre>        if k == 5:</pre></td>
                </tr>
                <tr class="fold_end" id="1">
                    <td><pre>15</pre></td>
                    <td></td>
                    <td><pre>            print('OK !')</pre></td>
                </tr>
                <tr class="">
                    <td><pre>16</pre></td>
                    <td></td>
                    <td><pre># Fin du code...</pre></td>
                </tr>
                <tr class="listing_end">
                    <td><pre>17</pre></td>
                    <td></td>
                    <td><pre># Ou presque...</pre></td>
                </tr>
            </table>
        </code>
        <div>
C'est fini !!!
        </div>
    </body>
</html>

**gwinyam** · 18/11/2010, 23h16

Hum... avec ça?
http://api.jquery.com/html/

**rambc** · 19/11/2010, 10h37

Bonjour et merci car cela marche.

Je vais essayer de voir s'il on peut quand même accéder directement à une cellule d'un tableau quand on est dans une ligne. Je serais étonné qu'on ne puisse pas le faire...

**gwinyam** · 19/11/2010, 13h40

J'ai pas la doc sous la main, je suis au taf là (internet bridé, c'est lourd), mais oui je pense pouvoir dire que c'est possible de le faire sans même douter.

Avec "ascendor/descendor" dans les sélecteurs, ça doit suffire.

**rambc** · 20/11/2010, 11h54

Merci.

En fait, je viens de tomber sur children. C'est cela qu'il faut utiliser tout simplement...

J'ai mis le code ci-dessus à jour.

**rambc** · 21/11/2010, 13h46

Bonjour,
considérons le bout de code suivant :

Code html :

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

1
2
3
4
5
6
 
<tr class="fold_start_opened" id="2" style="cursor:pointer;">
    <td><pre>14</pre></td>
    <td class="symbolFold"><pre> - </pre></td>
    <td><pre>        if k == 5:</pre></td>
</tr>

Pour le moment, mon code récupère un clic sur la ligne, mais je voudrais l'améliorer pour que le clic soit récupérer uniquement sur la cellule contenant le signe plus.

On commence donc par changer $('tr[class^="fold_start"]').click(function() en $('td[".symbolFold"]').click(function(). Jusqu'ici, ça va.

Là où cela se complique, c'est qu'il va falloir se replacer au niveau de la ligne contenant le symbole cliqué afin de lancer ma procédure comme elle le fait actuellement. Comment faire ?

**rambc** · 21/11/2010, 13h53

Je "m'auto-répond".

Après les "children", il faut essayer le "parent()"...

Bon ce sera pour la fin de la semaine prochaine.

**gwinyam** · 21/11/2010, 15h04

C'est beau

**rambc** · 22/11/2010, 15h27

Merci, mais il reste quelques points à finir.

MISE A JOUR DU LUNDI 22 NOVEMBRE 2010 : suite aux remarques de danielhagnoul, j'ai pu faire les nettoyages ci-dessous.

Le code utilise hasClass. Ceci rend alors inutile l'emploi de class = "" dans le tableau. On allège donc beaucoup le code HTML.
La déclaration des variables utilisent maintenant var pour ne pas avoir des variables globales.
Grâce à la méthode hasClass, le niveau du bloc est maintenant indiqué via par exemple class="fold_end level_1". Ceci évite de détourner la balise id de son usage CSS normal. Par contre, ceci a nécessité l'ajout d'une nouvelle fonction : giveLevel.

Code html :

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
 
<!--
Sources:
    http://www.developpez.net/forums/d629718/webmasters-developpement-web/javascript/bibliotheques-frameworks/jquery/changer-nom-class-clic-jquery/#post3711520
    http://www.developpez.net/forums/d1001334/webmasters-developpement-web/javascript/bibliotheques-frameworks/jquery/parcourir-lignes-tableau-partir-ligne-cliquee/#post5600151
 
    http://api.jquery.com/html/
    http://api.jquery.com/children/
-->
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"/>
 
        <script type="text/javascript">
function giveLevel(oneLine){
// The level of the block is given for example in
// "class='fold_start_opened level_0'"
    var levelNb = oneLine.attr("class"),
        pieces = levelNb.split(" ");
 
    for(i = 0 ; i < pieces.length ; i++){
        if(pieces[i].indexOf("level_") == 0){
// "level_" contains 6 characters.
            levelNb = pieces[i].substring(6, pieces[i].length);
            i = pieces.length;
        }
    }
 
    return parseInt(levelNb);
}
 
function hideOrShow(oneLine, showLine){
    if(showLine){
        oneLine.show();
    }else{
        oneLine.hide();
    }
}
 
function changeSymbolFold(oneLine, showLine){
    if(showLine){
        oneLineHtmlContent = '<pre> - <' + '/pre>';
    }else{
        oneLineHtmlContent = '<pre> + <' + '/pre>';
    }
 
    oneLine.children(".symbolFold").html(oneLineHtmlContent);
}
 
function changeClassFold(oneLine){
    var showLine;
 
    if(oneLine.hasClass("fold_start_closed")){
        oneLine
            .addClass("fold_start_opened")
            .removeClass("fold_start_closed")
        showLine = true;
    }else if(oneLine.hasClass("fold_start_opened")){
        oneLine
            .addClass("fold_start_closed")
            .removeClass("fold_start_opened")
        showLine = false;
    }
 
    return showLine;
}
 
function mustGoToNext(oneLine,
                      levelOfTheBlock){
    var goToNext = true;
 
// "listing_end" indicates the end of
// the table corresponding to the listing.
    if(oneLine.hasClass("listing_end")){
        goToNext = false;
    }else if(oneLine.hasClass("fold_end")){
// "id" is used to know the levels of imbrication of blocks.
        if(levelOfTheBlock >= giveLevel(oneLine)){
            goToNext = false;
        }
    }
 
    return goToNext;
}
 
function goToTheEndOfTheBlock(oneLine,
                              showLine){
    var levelOfTheBlock = giveLevel(oneLine),
        goToNext = mustGoToNext(oneLine, levelOfTheBlock);
 
    hideOrShow(oneLine, showLine);
 
    while(goToNext){
        oneLine = oneLine.next();
        goToNext = mustGoToNext(oneLine,
                                levelOfTheBlock);
    }
 
    if(oneLine.hasClass("fold_start_closed")){
        oneLine = goToTheEndOfTheBlock(oneLine,
                                       showLine);
    }
 
    return oneLine;
}
 
$(document).ready(function(){
    $('tr[class^="fold_start"]').click(function(){
        var goToNext = true,
            showLine = changeClassFold($(this)),
            currentLine = $(this),
            levelOfTheBlockClicked = giveLevel(currentLine);
 
        changeSymbolFold(currentLine, showLine);
 
        while(goToNext){
            currentLine = currentLine.next();
 
            if(currentLine.hasClass("fold_start_closed")){
                currentLine = goToTheEndOfTheBlock(currentLine,
                                                   showLine);
// "currentLine" is the last line of the block,
// so it is not necessary to show it.
            }else{
                hideOrShow(currentLine,
                           showLine);
            }
 
            goToNext = mustGoToNext(currentLine,
                                    levelOfTheBlockClicked);
        }
    });
});
        </script>
    </head>
 
 
    <body>
        <div>
Un petit exemple de listing....
        </div>
        <code>
            <table >
                <tr class="fold_start_opened level_0" style="cursor:pointer;">
                    <td><pre>01</pre></td>
                    <td class="symbolFold"><pre> - </pre></td>
                    <td><pre>def function(bidon):</pre></td>
                </tr>
                <tr>
                    <td><pre>02</pre></td>
                    <td></td>
                    <td><pre>    """</pre></td>
                </tr>
                <tr>
                    <td><pre>03</pre></td>
                    <td></td>
                    <td><pre>    Un petit commentaire...</pre></td>
                </tr>
                <tr>
                    <td><pre>04</pre></td>
                    <td></td>
                    <td><pre>    """</pre></td>
                </tr>
                <tr>
                    <td><pre>05</pre></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td><pre>06</pre></td>
                    <td></td>
                    <td><pre>    print('Cette fonction est bidon...')</pre></td>
                </tr>
                <tr class="fold_start_opened level_1" style="cursor:pointer;">
                    <td><pre>07</pre></td>
                    <td class="symbolFold"><pre> - </pre></td>
                    <td><pre>    for i in range(5):</pre></td>
                </tr>
                <tr>
                    <td><pre>08</pre></td>
                    <td></td>
                    <td><pre>        print(i)</pre></td>
                </tr>
                <tr class="fold_end level_1">
                    <td><pre>09</pre></td>
                    <td></td>
                    <td><pre>        print(i**2)</pre></td>
                </tr>
                <tr>
                    <td><pre>10</pre></td>
                    <td></td>
                    <td><pre># Une autre boucle...</pre></td>
                </tr>
                <tr class="fold_start_opened level_1" style="cursor:pointer;">
                    <td><pre>11</pre></td>
                    <td class="symbolFold"><pre> - </pre></td>
                    <td><pre>    for k in range(5):</pre></td>
                </tr>
                <tr>
                    <td><pre>12</pre></td>
                    <td></td>
                    <td><pre>        print('='*k)</pre></td>
                </tr>
                <tr>
                    <td><pre>13</pre></td>
                    <td></td>
                    <td><pre># Un test dans une boucle...</pre></td>
                </tr>
                <tr class="fold_start_opened level_2" style="cursor:pointer;">
                    <td><pre>14</pre></td>
                    <td class="symbolFold"><pre> - </pre></td>
                    <td><pre>        if k == 5:</pre></td>
                </tr>
                <tr class="fold_end level_1">
                    <td><pre>15</pre></td>
                    <td></td>
                    <td><pre>            print('OK !')</pre></td>
                </tr>
                <tr>
                    <td><pre>16</pre></td>
                    <td></td>
                    <td><pre># Fin du code...</pre></td>
                </tr>
                <tr class="listing_end">
                    <td><pre>17</pre></td>
                    <td></td>
                    <td><pre># Ou presque...</pre></td>
                </tr>
            </table>
        </code>
        <div>
C'est fini !!!
        </div>
    </body>
</html>