Jak poznać indeks <tr> wewnątrz <table> z jQuery?

Question

Obecnie wdrażam coś w rodzaju this post (w szczególności efekt ma miejsce po kliknięciu wiersza)

Skąd wiadomo, jaki jest indeks wiersza w tabeli?

Answer 1

Jeśli określona procedura obsługi kliknięcia bezpośrednio na tr elementów, można użyć metody index takiego:

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

Jeżeli zdarzenie click jest zobowiązany nie bezpośrednio na elemencie tr (jeśli używasz kotwica, przycisk, itp ...), należy znaleźć najbliższy tr aby uzyskać odpowiedni indeks:

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

    return false; 
}); 

Spróbuj przykład here.

Answer 2

To powinno działać:

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

Nie trzeba tr w wywołaniu siblings jeśli jesteś pewien, że twój html będzie dobrze uformowane.

Answer 3

Aby odpowiedzieć na pierwsze pytanie:

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

Jeśli po prostu zrobić:

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

i masz wiele tabel na stronie, otrzymasz błędny wynik.

W związku z tym nie trzeba znać indeksu, aby przenosić wiersze w górę iw dół w tabeli. Na przykład:

<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> 

o coś takiego:

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