Làm thế nào để biết chỉ số của một <tr> bên trong một <table> với jQuery?

Question

Tôi hiện đang triển khai một cái gì đó như this post (cụ thể, hiệu ứng diễn ra khi hàng được nhấp)

Làm cách nào để biết chỉ mục của hàng nằm bên trong bảng?

Answer 1

Nếu bạn định nghĩa xử lý nhấp chuột trực tiếp trên tr yếu tố, bạn có thể sử dụng phương pháp index như thế này:

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

Nếu sự kiện nhấn là ràng buộc không trực tiếp trên các yếu tố tr (nếu bạn đang sử dụng một neo, một nút, vv ...), bạn nên tìm gần nhất tr để có được chỉ số đúng:

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

    return false; 
}); 

Hãy thử một ví dụ here.

Answer 2

này nên làm việc:

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

Bạn không cần tr trong cuộc gọi đến siblings nếu bạn chắc chắn html của bạn sẽ được well-formed.

Answer 3

Để trả lời câu hỏi đầu tiên của bạn:

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

Nếu bạn chỉ làm:

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

và bạn có nhiều bảng trên trang, bạn sẽ nhận được một kết quả sai lầm.

Điều đó đang được nói, bạn không cần biết chỉ mục để di chuyển các hàng lên xuống trong bảng. Ví dụ:

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

với một cái gì đó như:

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