Jquery et la fonction index()

**charliejo** · 15/09/2009, 19h30

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 :

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

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

**Sourrisseau** · 18/09/2009, 20h29

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

**charliejo** · 21/09/2009, 08h57

Cela ne fonctionne pas, il me dit toujours "-1"

**huguette** · 21/09/2009, 10h55

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

**danielhagnoul** · 21/09/2009, 18h05

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 :

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

**charliejo** · 22/09/2009, 08h42

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 :

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

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 :

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

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.

Jquery et la fonction index()

jQuery

Vue hybride

Discussions similaires

Partager

Partager