web-dev-qa-db-fra.com

Trouver l'index de la rangée de table en utilisant jQuery

Je suis un utilisateur intermédiaire à JQuery. Je sais trouver le Rowindex d'une table à l'aide de JQuery, mais mon scénario est un autre. Ma table (GridView) se compose de 20 colonnes et chaque colonne avec des commandes différentes telles que la zone de texte, la liste déroulante, l'image, l'étiquette. Tous sont des commandes côté serveur dans chaque ligne. Je lie la grille avec les enregistrements de la base de données. Maintenant, lorsque je clique sur n'importe quel contrôle ou ONCHANGE de n'importe quelle zone de texte, j'ai besoin d'obtenir le Rowindex de cette ligne de colonne modifiée. Voici le code que j'ai utilisé:

$("#gv1 tr input[name $= 'txtName']").live('click', function(e){
   alert($(this).closest('td').parent().attr('sectionRowIndex'));
});

Mais je suis incapable d'obtenir le Rowindex. Si j'utilise n'importe quel contrôle HTML à l'intérieur de la grille, je suis capable d'obtenir le Rowindex. Y a-t-il un moyen de trouver le Rowindex lorsqu'un contrôle du serveur à l'intérieur de la grilleView est cliqué?

jqueryindexingrow
15
superachu

sectionRowIndex est une propriété de l'élément <tr>, pas un attribut.

La bonne façon de modifier votre code d'échantillon est d'accéder à l'élément JQuery avec un indexeur zéro comme celui-ci:

$("#gv1 tr input[name $= 'txtName']").live('click', function(e){
   alert($(this).closest('td').parent()[0].sectionRowIndex);
});

Cela retournera l'indice de ligne correct pour vous. De plus, si vous allez utiliser la fonction de JQuery's .closest() fonction pour traverser le DOM et aussi .parent(), pourquoi ne pas compenser ces deux et simplement traverser jusqu'à la <tr> élément?

$("#gv1 tr input[name $= 'txtName']").live('click', function(e){
   alert($(this).closest('tr')[0].sectionRowIndex);
});

Cela gérera également des cas étranges où la relation mère-> enfant n'est pas exactement ce que vous attendiez. Par exemple, si vous enchaînez une $(this).parent().parent() puis décidé d'envelopper votre cellule interne avec une autre div ou une autre portée, vous pourriez bousiller la relation. La fonction .closest() est la solution facile pour vous assurer qu'elle fonctionnera toujours.

Bien sûr, mes échantillons de code sont réutilisés votre échantillon fourni ci-dessus. Vous voudrez peut-être vérifier d'abord un sélecteur plus simple pour prouver que cela fonctionne, puis affinez vos sélecteurs.

9
BenSwayne

Ceci est pour une case à cocher dans la cellule de table, sur le changement:

 var row = $(this).parent().parent();
 var rowIndex = $(row[0].rowIndex);
 console.log(rowIndex);
4
PruitIgoe

Devrait être capable de simplement utiliser:

var rowIndex = $(this).parents("tr:first")[0].rowIndex;
2
David