Trova indice riga tabella utilizzando jQuery

Question

Sono un utente intermedio in jQuery. So di trovare il rowIndex di una tabella usando jquery, ma il mio scenario è diverso. La mia tabella (GridView) consiste di 20 colonne e ogni colonna con controlli diversi come textbox, dropdownlist, immagine, etichetta. Tutti sono controlli lato server in ogni riga. Lego il gridview con i record dal database. Ora quando clicco su qualsiasi controllo o onchange di qualsiasi casella di testo, ho bisogno di ottenere il rowIndex della riga di quella colonna modificata. Ecco il codice che ho utente:

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

Ma non riesco a ottenere il rowIndex. Se utilizzo qualsiasi controllo html all'interno di gridview, sono in grado di ottenere rowIndex. C'è un modo per scoprire rowIndex quando si fa clic su un controllo server all'interno di gridview?

Answer 1

Prova questo:

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

Questo è per una casella nella cella della tabella, il cambiamento:

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

Answer 3

sectionRowIndex è una struttura dell'elemento <tr>, non un attributo.

Il modo corretto per modificare il codice di esempio è quello di accedere alla voce jQuery con un indicizzatore pari a zero in questo modo:

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

Ciò restituirà l'indice di riga corretto per voi. Inoltre, se hai intenzione di utilizzare la funzione .closest() di jQuery per attraversare il DOM e anche .parent(), perché non compilarli quei due e solo attraversare fino al più vicino elemento <tr>?

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

Questo gestirà anche casi strani in cui la relazione genitore-> figlio non è esattamente quello che ci si aspettava. Ad esempio se hai incatenato uno $(this).parent().parent() e hai deciso di avvolgere la tua cella interna con un altro div o span, potresti rovinare la relazione. Il .closest() è la via più semplice per assicurarsi che funzioni sempre.

Ovviamente i miei campioni di codice stanno riutilizzando l'esempio fornito sopra. Puoi provare prima con un selettore più semplice per dimostrare che funziona, quindi perfezionare i selettori.

Answer 4

dovrebbero essere in grado di utilizzare solo per:

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