Как получить доступ к определенной ячейке строки с нажатой таблицей в javascript

У меня есть таблица HTML, заполненная из базы данных. И функция jquery, которая добавляет событие клика клиента к каждой строке таблицы.

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

Теперь я могу получить полные значения строк, щелкнув любую строку. Теперь мне нужно получить доступ к отдельному значению ячейки в этой функции. Может ли кто-нибудь сказать мне, как я получаю значение отдельной ячейки при щелчке по строке.

Взгляните на это:

 $(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() +'
' +i+': '+$(td).text() + (td===cell?' [clicked]':'') ); }); }); });

Вот рабочий код: http://jsfiddle.net/VbA9D/

Если у вас есть другие элементы HTML внутри ячеек таблицы, на которые вы могли бы щелкнуть, приведенный ниже пример будет работать лучше:

 $(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() +'
' +i+': '+$(td).text() + (td===cell?' [clicked]':'') ); }); }); });

И вот код, который вы можете проверить:

http://jsfiddle.net/7PWu5/

Во-первых, нет необходимости в .each – метод .click будет связываться с каждым переданным элементом, а не только с первым.

Во-вторых, существуют определенные свойства, называемые cells в элементах строки таблицы, которые дают прямой доступ к ячейкам строки:

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

Обратите внимание на использование делегирования событий – обработчик событий фактически зарегистрирован на всей таблице, а затем полагается на пузырьки событий, чтобы указать вам, какая строка была нажата (и от этого получить текст ячейки).

Вы можете получить вторую ячейку, используя

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

Обычно для более надежного кода вы предпочитаете добавлять class в нужную ячейку, чтобы вы могли использовать

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

Если вы хотите получить ячейку, которая была нажата, просто привяжите событие к ячейке:

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

Обратите внимание, что бесполезно перебирать коллекцию jQuery для привязки события, как вы можете видеть из моего последнего кода.

Я предпочитаю это:

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

Вам не нужно явно использовать итерацию с использованием .each() для привязки обработчиков событий к набору элементов, функции привязки событий будут неявно делать это для вас. Из-за распространения события вы можете связать обработчик события с

и использовать event.target (исходный элемент), чтобы получить ссылку на элемент, на который был нажат (

):

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

Это предполагает, что вас интересует конкретный элемент

который был нажат.