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"

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

jQuery

Vue hybride

Discussions similaires

Partager

Partager