Come conoscere l'indice di <tr> all'interno di <table> con jQuery?

Question

Ora sto implementando qualcosa come this post (in particolare, l'effetto si verifica quando si fa clic sulla riga)

Come faccio a sapere qual è l'indice della riga all'interno della tabella?

Answer 1

Se è stato definito il gestore click direttamente sui tr elementi, è possibile utilizzare il metodo index in questo modo:

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

Se l'evento click è legato non direttamente sull'elemento tr (se si utilizza un ancora, un pulsante, ecc ...), si dovrebbe trovare il più vicino tr per ottenere l'indice destro:

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

    return false; 
}); 

Prova un esempio here.

Answer 2

Questo dovrebbe funzionare:

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

Non è necessario tr nella chiamata a siblings se si è sicuri sarà ben formato codice HTML.

Answer 3

Per rispondere alla tua prima domanda:

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

Se lo farete:

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

e si dispone di più tabelle sulla pagina, si otterrà un risultato errato.

Detto questo, non è necessario conoscere l'indice per spostare le righe su e giù in una tabella. Per esempio:

<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 qualcosa di simile:

$("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; 
});