Как получить значение ячейки таблицы jQuery?

Question

Эта тема является второй проблемой, вытекающей из моего previous issue. После привязки события on click к моей функции show-chart мне все равно нужно знать значение id сотрудника, которое используется для получения правильных данных диаграммы.

Возможно ли пропустить идентификатор сотрудника для показаChartByEmpId (i)?

HTML

<table id="empTable" class="tablesorter"> 
    <thead> 
     <tr> 
      <th> Employee ID </th> 
      <th> Name </th> 
      <th> Department </th> 
      <th> Title </th> 
      <th> Show Chart </th> 
     </tr> 
    </thead> 


    <tbody> 
     <tr> 
      <td> 101 </td> 
      <td> John </td> 
      <td> R&D </td> 
      <td> Engineer </td> 
      <td> <button class="doPieChart"> Pie Chart </button> </td> 
     </tr> 
     <tr> 
      <td> 102 </td> 
      <td> David </td> 
      <td> R&D </td> 
      <td> Engineer </td> 
      <td> <button class="doPieChart"> Pie Chart </button> </td> 
     </tr> 
    </tbody> 
</table> 
<div class="secondary"> </div> 

JS

function drawPieChart(i) { 
    $('.secondary').html('<div id="chart_div" class="div'+i+'">my graph '+(i+1)+' in fancybox</div>'); 
} 

function showChart(i) { 
    drawPieChart(i); 
} 

function showChartByEmpId(i) { 
    showChart(i); 
} 

jQuery(function ($) { 
    //How to get emp Id here? 
    $(".doPieChart").each(function (i) { 
     $(this).on("click", function() { 
      showChartByEmpId(i); 
      $.fancybox("#chart_div"); 
     }); // on click 
    }); // each 
}); 

Вот мой пример наJSFIDDLE

Answer 1

Используйте это, чтобы получить EMP ID внутри функции мыши

var empID = $(this).closest('tr').find('td:first').text(); 

Вам не нужно .each()

$('.doPieChart').on("click", function() { 
    var empID = $(this).closest('tr').find('td:first').text(); 
    showChartByEmpId(empID); 
    $.fancybox("#chart_div"); 
}); 

Answer 2

Это должно решить вашу проблему:

var EmpId; 
jQuery(function ($) { 
    //How to get emp Id here? 
    $(".doPieChart").each(function() { 
     $(this).on("click", function() { 
      EmpId = $(this).closest('tr').find('td:first').text(); 
      showChartByEmpId(EmpId); 
      $.fancybox("#chart_div"); 
     }); // on click 
    }); // each 
}); 

Fiddle: http://jsfiddle.net/malvaniya_shakti/bqs52/12/

Answer 3

В качестве альтернативы просто добавить вар в существующую код

var empID = $.trim($(this).parent().siblings("td").eq(0).text()); 

Так

jQuery(function ($) { 
    //How to get emp Id here? 
    $(".doPieChart").each(function (i) { 
     $(this).on("click", function() { 
      var empID = $.trim($(this).parent().siblings("td").eq(0).text()); 
      showChartByEmpId(empID); 
      $.fancybox("#chart_div"); 
     }); // on click 
    }); // each 
}); 

См JSFIDDLE

ПРИМЕЧАНИЕ: Я всегда предпочитаю метод .eq() по классу псевдо :first, потому что это (возможно) быстрее.