Jquery et la fonction index()

Version imprimable

15/09/2009, 19h30
charliejo

Jquery et la fonction index()
Bonjour,
Je débute avec jquery et j'ai un souci... je voudrais récupérer lors d'un clique sur ma ligne de tableau, le numéro de la ligne cliqué...
Donc je pensais à la fonction index:
Code:

1 2 3 4 $("tr").click(function(){ num=$("tr").index($(this)); alert(num); });
Le résultat est -1... donc, je crois que j'ai pas compris comment utilisé la fonction index....
Sinon une autre fonction pour trouver le numéro de ma ligne???
Merci
18/09/2009, 20h29
Sourrisseau

doc jquery

Voici le lien vers la doc jquery : http://docs.jquery.com/Core/index

Tu devrais ecrire : num=$("tr").index(this);

Dis moi si ca marche ;)
21/09/2009, 08h57
charliejo

Cela ne fonctionne pas, il me dit toujours "-1"
21/09/2009, 10h55
huguette

As-tu essayé avec d'autres type de balises que "tr" ou d'attribuer une class à chaque ligne?
Enfin je dis ça mais je viens de tester avec vos deux écritures et ça marche. C'est certainement un autre élément de ta page qui perturbe...
Peut-être que tu devrais nous poster plus de code.

bon courage

Bonsoir.

$("tr").index(this) fonctionne bien, mais peut conduire à des résultats inattendus. Il vaut mieux préciser l'id de la table, 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
 
<!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=utf-8" />
    <meta name="Author" content="Daniel Hagnoul" />
    <title>Page type</title>
    <style type="text/css">
        body {
            background-color:#696969;
            color:#000000;
            font-family:Arial, Helvetica, sans-serif;
            font-size:medium;
            font-style:normal;
            font-weight:normal;
            line-height:normal;
            letter-spacing:normal;
        }
        h1,h2,h3,h4,h5 {
            font-family:"Times New Roman", Times, serif;
        }
        div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
            margin:0px;
            padding:0px;
        }
        p {
            padding:6px;
        }
        ul,ol,dl {
            list-style:none;
            padding-left:6px;
            padding-top:6px;
        }
        li {
            padding-bottom:6px;
        }
        div#conteneur {
            width:95%;
            margin:12px auto;
            padding:6px;
            background-color:#FFFFFF;
            color:#000000;
            border:1px solid #666666;
            font-size:0.8em;
        }
        div#affiche {
            margin:12px;
            border:1px solid #999999;
        }
    </style>
    <script type="text/javascript" src="../lib/jquery-1.3.2.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("tr").click(function(){
                $("#affiche").append("<p>this.id = " + this.id + 
                                                            ", $('tr').index(this) = " + $("tr").index(this) + "</p>");
                return false;
            });        
 
            $("#table2 tr").click(function(){
                $("#affiche").append("<p>this.id = " + this.id + 
                                                            ", $('#table2 tr').index(this) = " + $("#table2 tr").index(this) + "</p>");
                return false;
            });        
        });
    </script>
</head>
<body>
    <div id="conteneur">
        <div id="affiche"></div>
        <table id="table1">
            <tr id="table1tr1">
                <td>100</td>
                <td>101</td>
            </tr>
            <tr id="table1tr2">
                <td>200</td>
                <td>201</td>
            </tr>
        </table>
        <table id="table2">
            <tr id="table2tr1">
                <td>100</td>
                <td>101</td>
            </tr>
            <tr id="table2tr2">
                <td>200</td>
                <td>201</td>
            </tr>
        </table>
    </div>
</body>
</html>

On peut encore être plus précis, exemple : $('#table2 tfoot tr').index(this)

C'est effectivement un peu plus compliqué....
En fait, ce n'est pas sur le click de la ligne que je veux récupérer le numéro du tr mais sur le changement d'une liste se trouvant sur cette ligne...

Html:
Code:

1 2 3 4 5 6 7 8 9 <table id="TQuery" style="width:700px"> <tr> <td style="width:350px"><select id="SQueryFld0" style="width:350px"> <option></option> <?php echo $lstOption;?> </select></td> </tr> <tr>....</tr> </table>
Et jquery:
Code:

1 2 3 4 5 6 $(function(){ $("select[@id^='SQueryFld']").change(function(){ $num=$("tr").index($(this).parent().parent()); alert(num); )}; });
Si je test le "$(this).parent().parent()" je suis bien sur le tr mais pour l'index, il me met toujours "-1"
Merci à vous de vous intéresser à mon problème.

Bonsoir.

Citation:

Envoyé par charliejo

Code:

1
2
3
4
5
6
7
$(function(){
        $("select[@id^='SQueryFld']").change(function(){
                      $num=$("tr").index($(this).parent().parent());
                      alert(num);
                )};
});

Attention, trois petites erreurs :

En jQuery 1.3 il faut supprimer @ devant l'id.
$num : c'est du PHP !
}); et non )};

Voici un 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
 
<!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=utf-8" />
    <meta name="Author" content="Daniel Hagnoul" />
    <title>Page type</title>
    <style type="text/css">
        body {
            background-color:#696969;
            color:#000000;
            font-family:Arial, Helvetica, sans-serif;
            font-size:medium;
            font-style:normal;
            font-weight:normal;
            line-height:normal;
            letter-spacing:normal;
        }
        h1,h2,h3,h4,h5 {
            font-family:"Times New Roman", Times, serif;
        }
        div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
            margin:0px;
            padding:0px;
        }
        p {
            padding:6px;
        }
        ul,ol,dl {
            list-style:none;
            padding-left:6px;
            padding-top:6px;
        }
        li {
            padding-bottom:6px;
        }
        div#conteneur {
            width:95%;
            margin:12px auto;
            padding:6px;
            background-color:#FFFFFF;
            color:#000000;
            border:1px solid #666666;
            font-size:0.8em;
        }
        div#affiche {
            margin:12px;
            border:1px solid #999999;
        }
    </style>
    <script type="text/javascript" src="../lib/jquery-1.3.2.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("select[id^='SQueryFld']").change(function(){
                //F3 + Firebug
                //console.log($(this).parents("#TQuery"));
 
                var objTable = $(this).parents("#TQuery");
                var objTR = $(this).parents("tr");
 
                //console.log($(objTable)[0] + ', ' + $(objTR)[0]);
 
                var i = $("tr", objTable).index(objTR);
 
                alert(i);
            });
        });
    </script>
</head>
<body>
    <div id="conteneur">
        <div id="affiche"></div>
        <table id="TQuery" style="width:700px">
            <tr>
                <td>
                    <p>
                        Donec ultrices lectus et nibh mattis pharetra. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin tristique erat vel massa. Morbi faucibus pulvinar ipsum. Cras venenatis, felis et molestie vehicula, ante dui semper sem, vitae fermentum erat urna posuere lectus. Fusce rhoncus, libero ut laoreet vulputate, sapien nibh varius urna, eu suscipit neque nulla ut justo. In rutrum augue quis lacus. Vestibulum ultricies, turpis vel auctor egestas, risus dolor semper nisl, eu rhoncus sem ante a lacus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed at justo a purus volutpat auctor.
                    </p>
                </td>
            </tr>
            <tr>
                <td style="width:350px">
                    <select id="SQueryFld0" style="width:350px">
                        <option value="1" selected="selected">Choix 1</option>
                        <option value="2">Choix 2</option>
                        <option value="3">Choix 3</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>
                    <p>
                        Donec ultrices lectus et nibh mattis pharetra. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin tristique erat vel massa. Morbi faucibus pulvinar ipsum. Cras venenatis, felis et molestie vehicula, ante dui semper sem, vitae fermentum erat urna posuere lectus. Fusce rhoncus, libero ut laoreet vulputate, sapien nibh varius urna, eu suscipit neque nulla ut justo. In rutrum augue quis lacus. Vestibulum ultricies, turpis vel auctor egestas, risus dolor semper nisl, eu rhoncus sem ante a lacus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed at justo a purus volutpat auctor.
                    </p>
                </td>
            </tr>            
        </table>
    </div>
</body>
</html>