Question

这个帖子是我previous issue后面的第二个问题。将点击事件绑定到我的show-chart函数后，我仍然需要知道用于获取正确图表数据的employee id的值。

是否可以将员工ID传递给showChartByEmpId（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
});

小提琴：http://jsfiddle.net/malvaniya_shakti/bqs52/12/

Answer 3

或者只是将此var添加到现有代码

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，因为它（可以说）更快。

如何通过jQuery获取表格单元格的值？

3 个答案: