Recherche d'index de ligne de table à l'aide de jQuery

Question

Je suis un utilisateur intermédiaire de jQuery. Je sais trouver le rowIndex d'une table en utilisant jQUery, mais mon scénario est différent. Ma table (GridView) se compose de 20 colonnes et chaque colonne avec différents contrôles comme la zone de texte, la liste déroulante, l'image, l'étiquette. Tous sont des contrôles côté serveur dans chaque ligne. Je lie le gridview avec les enregistrements de la base de données. Maintenant, quand je clique sur un contrôle ou un changement de n'importe quelle zone de texte, j'ai besoin d'obtenir le rowIndex de la ligne de cette colonne modifiée. Voici le code que j'ai utilisateur:

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

Mais je ne parviens pas à obtenir le rowIndex. Si j'utilise un contrôle html dans le gridview, je peux obtenir le rowIndex. Est-il possible de trouver le rowIndex quand un contrôle de serveur dans le gridview est cliqué?

Answer 1

Essayez ceci:

var rowIndex = $(this) 
    .closest('tr') // Get the closest tr parent element 
    .prevAll() // Find all sibling elements in front of it 
    .length; // Get their count 

Answer 2

Ceci est pour une case à cocher dans la cellule du tableau, sur le changement:

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

Answer 3

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 zéro indexeur comme ceci:

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

Cela renverra l'index de ligne correcte pour vous. Aussi, si vous allez utiliser la fonction .closest() de jQuery pour parcourir le DOM et également .parent(), pourquoi ne pas compiler ces deux et simplement passer à l'élément <tr> le plus proche?

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

Ceci traitera également les cas bizarres où la relation parent-> enfant n'est pas exactement ce que vous attendiez. Par exemple, si vous enchaînez un $(this).parent().parent() puis que vous décidez d'envelopper votre cellule interne avec un autre div ou span, vous risquez de bousiller la relation. Le .closest() est le moyen le plus facile de s'assurer que cela fonctionnera toujours.

Bien sûr, mes exemples de code réutilisent votre exemple ci-dessus. Vous pouvez d'abord tester avec un sélecteur plus simple pour prouver que cela fonctionne, puis affiner vos sélecteurs.

Answer 4

devrait être en mesure d'utiliser simplement:

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