¿Cómo saber el índice de <tr> dentro de <table> con jQuery?

Question

Ahora soy algo así como la implementación de this post (en concreto, el efecto se produce cuando se hace clic en la fila)

¿Cómo sé cuál es el índice de la fila está dentro de la mesa?

Answer 1

Si ha definido el controlador de clic directamente sobre las tr elementos, puede utilizar el método index así:

$('#tableId tr').click(function() { 
    var rowIndex = $('#tableId tr').index(this); //index relative to the #tableId rows 
}); 

Si el evento de clic está obligado a no directamente sobre el elemento tr (si está utilizando una ancla, un botón, etc ...), usted debe encontrar el más cercano tr para obtener el índice derecho:

$(selector).click(function() { 
    var rowIndex = $('#tableId tr').index($(this).closest('tr')); 

    return false; 
}); 

probar un ejemplo here.

Answer 2

Esto debería funcionar:

$('#tableId tr').click(function() { 
    var index = $(this).siblings('tr').index(this); 
}); 

No es necesario tr en la llamada a siblings si está seguro será bien formado su html.

Answer 3

Para responder a su primera pregunta:

$("#id tr").click(function() { 
    alert($("#id tr").index(this)); 
}); 

Si usted acaba de hacer:

$("table tr").index(this); 

y tiene múltiples tablas de la página, obtendrá un resultado erróneo.

Dicho esto, no necesita saber el índice para mover las filas hacia arriba y hacia abajo en una tabla. Por ejemplo:

<table id="foo"> 
<tr> 
    <td><a href="#" class="up">Up</a> <a href="#" class="down">down</a></td> 
    <td>First row</td> 
</tr> 
<tr> 
    <td><a href="#" class="up">Up</a> <a href="#" class="down">down</a></td> 
    <td>Second row</td> 
</tr> 
<tr> 
    <td><a href="#" class="up">Up</a> <a href="#" class="down">down</a></td> 
    <td>Third row</td> 
</tr> 
</table> 

con algo como:

$("a.up").click(function() { 
    var row = $(this).closest("tr"); 
    if (row.prev().length > 0) { 
    row.insertBefore(row.prev()); 
    } 
    return false; 
}); 
$("a.down").click(function() { 
    var row = $(this).closest("tr"); 
    if (row.next().length > 0) { 
    row.insertAfter(row.next()); 
    } 
    return false; 
});