Cách truy cập vào ô cụ thể của hàng trong bảng được nhấp trong javascript

Question

Tôi có một bảng HTML được điền từ cơ sở dữ liệu. Và một hàm jquery bổ sung sự kiện click của khách hàng vào mọi hàng của bảng.

$(function() { 
    $(".TreeTable tr").each(function(index) { 
     $(this).click(function() { 
      alert($(this).text()); 
     }); 
    }); 
}); 

Bây giờ tôi có thể nhận được giá trị hàng đầy đủ bằng cách nhấp vào bất kỳ hàng nào. Bây giờ tôi cần truy cập giá trị ô riêng lẻ trong hàm đó. Bất kỳ ai có thể cho tôi biết cách tôi nhận giá trị ô riêng lẻ khi nhấp vào hàng.

Answer 1

Hãy xem này:

$(document).ready(function(){ 
    $('.TreeTable tr').click(function(e){ 
     var cell = $(e.target).get(0); // This is the TD you clicked 
     var tr = $(this); // This is the TR you clicked 
     $('#out').empty(); 
     $('td', tr).each(function(i, td){ 
      $('#out').html(
       $('#out').html() 
       +'<br>' 
       +i+': '+$(td).text() 
       + (td===cell?' [clicked]':'')); 
     }); 
    }); 
}); 

Dưới đây là đoạn code làm việc: http://jsfiddle.net/VbA9D/

Trong trường hợp bạn có các phần tử HTML khác bên trong các tế bào bảng trên mà bạn có thể nhấp chuột, ví dụ dưới đây sẽ làm việc tốt hơn:

$(document).ready(function(){ 
    $('.TreeTable tr').click(function(e){ 
     var cell = $(e.target).get(0); // This is the TD you clicked 
     if(cell.nodeName != 'TD') 
      cell = $(cell).closest('td').get(0); 
     var tr = $(this); // This is the TR you clicked 
     $('#out').empty(); 
     $('td', tr).each(function(i, td){ 
      $('#out').html(
       $('#out').html() 
       +'<br>' 
       +i+': '+$(td).text() 
       + (td===cell?' [clicked]':'')); 
     }); 
    }); 
}); 

Và đây là đoạn code bạn có thể kiểm tra:

http://jsfiddle.net/7PWu5/

Answer 2

Bạn có thể lấy tế bào thứ hai bằng cách sử dụng

alert($('td', this).eq(1).text()); 

Thông thường, đối với một mã số đáng tin cậy hơn, bạn sẽ thích thêm một lớp học để tế bào mong muốn của bạn để bạn có thể sử dụng

alert($('td.myclass', this).text()); 

Nếu những gì bạn muốn là lấy ô đã được nhấp, chỉ cần ràng buộc sự kiện vào ô:

$(".TreeTable td").click(function() { // td not tr 
    alert($(this).text()); 
}); 

Lưu ý rằng vô dụng khi lặp qua một bộ sưu tập jQuery để ràng buộc một sự kiện, như bạn có thể thấy từ mã cuối cùng của tôi.

Answer 3

Trước tiên, không cần thiết cho phương thức .each - phương pháp .click sẽ ràng buộc với mọi phần tử được chuyển, không chỉ là phần tử đầu tiên.

Thứ hai, có một thuộc tính cụ thể được gọi là cells trên các yếu tố hàng của bảng có cho phép truy cập trực tiếp đến các tế bào của hàng:

$('.TreeTable').on('click', 'tr', function() { 
    var td = this.cells[0]; // the first <td> 
    alert($(td).text()); 
}); 

Lưu ý việc sử dụng các đoàn đại biểu sự kiện - xử lý sự kiện thực sự là đăng ký trên toàn bộ bảng, và sau đó dựa vào sự kiện bubbling để cho bạn biết hàng nào đã được nhấp (và từ đó có được văn bản ô).

Answer 4

tôi thích điều này:

$('.TreeTable').on('click', 'td', function() { // td not tr 
    alert($(this).text()); 
}); 

Answer 5

Bạn không cần phải lặp một cách rõ ràng bằng .each() để ràng buộc xử lý sự kiện cho một tập hợp các yếu tố, các chức năng liên kết sự kiện này sẽ mặc nhiên làm điều đó cho bạn. Do công tác tuyên truyền sự kiện, bạn có thể gắn một event handler cho <tr> và sử dụng event.target (các yếu tố có nguồn gốc) để có được một tham chiếu đến các yếu tố đó đã thực sự nhấp vào (các <td>):

$(function() { 
    $('.TreeTable tr').click(function(event) { 
     console.log(this); // the <tr> 
     console.log(event.target); // the <td> 
    }); 
}); 

Đó là giả sử bạn' quan tâm đến phần tử <td> cụ thể đã được nhấp vào.