Buscar índice de fila de tabla usando jQuery

Question

Soy un usuario intermedio en jQuery. Sé encontrar el índice de filas de una tabla usando jQuery, pero mi escenario es diferente. Mi tabla (GridView) consta de 20 columnas y cada columna con diferentes controles como cuadro de texto, lista desplegable, imagen, etiqueta. Todos son controles del lado del servidor en cada fila. Ato el gridview con los registros de la base de datos. Ahora cuando hago clic en cualquier control o en el cambio de cualquier cuadro de texto, necesito obtener el rowIndex de la fila de esa columna modificada. Aquí está el código que tengo usuario:

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

Pero no puedo obtener el rowIndex. Si uso cualquier control html dentro de gridview, puedo obtener el rowIndex. ¿Hay alguna forma de averiguar rowIndex cuando se hace clic en un control del servidor dentro de gridview?

Answer 1

Prueba esto:

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

Se trata de una casilla de verificación en la celda de tabla, sobre el cambio:

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

Answer 3

sectionRowIndex es una propiedad del elemento <tr>, no un atributo.

La forma correcta de modificar su código de ejemplo es para acceder al elemento de jQuery con un indexador cero de esta manera:

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

Esto devolverá el índice de la fila correcta para usted. Además, si va a utilizar la función .closest() de jQuery para recorrer el DOM y también .parent(), ¿por qué no compilar esos dos y simplemente recorrer hasta el elemento <tr> más cercano?

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

Esto también manejará casos extraños en los que la relación padre-> hijo no es exactamente lo que esperaba. Por ejemplo, si encadenó un $(this).parent().parent() y luego decidió envolver su celda interna con otro div o span, puede arruinar la relación. El .closest() es la salida más fácil para asegurarse de que siempre funcione.

Por supuesto, mis ejemplos de código están reutilizando la muestra provista anteriormente. Es posible que desee probar con un selector más simple primero para demostrar que funciona, luego refinar sus selectores.

Answer 4

deben ser capaces de usar sólo:

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