javascript - 如何通过表jquery中的onclick获取一些数据列和标题

Question

现在我有一个使用 javascript 生成的表。下面是我生成表的代码:

$.ajax({
            type:"POST",
            url:"../cdc/load/jsonTrack.php?",
            data:dataString,
            dataType: 'json',
            success: function(data){
                if(data.status === "success") { 
                    var elements = data.elements; 
                    if(elements.length === 0) {
                        $('#cdcTracking-list tbody').append( '<tr>' +
                            '<td colspan="7">No session to display</td>' +
                            '</tr>');
                    }
                    for( var i = 0; i < elements.length; i++){
                        var element = elements[i];

                        //console.log('session id:' + element.vesselCode);
                        $('#cdcTracking-list tbody').append( '<tr>' +
                            '<td style="color: green;">' + element.vesselCode + '</td>' +
                            '<td style="color: black;">' + element.voyage + '</td>' +
                            '<td style="color: black;">' + element.chasisNo + '</td>' +
                            '<td style="color: black;">' + element.chasisNo + '</td>' +
                            '<td style="color: blue;">' + element.plateNo + '</td>' +
                            '<td style="color: blue;">' + element.bookingRef + '</td>' + 
                            '<td style="color: blue;">' + element.serviceTerm +'</td>'+
                            '</tr>'                                    
                        );
                    }
                }else { 
                    $('#cdcTracking-list tbody').append( '<tr><td colspan="7">No session to display</td></tr>');
                }
            }
        }); 

有谁知道我怎样才能通过 onclick 获取一些列数据和它的标题，因为我当前的代码似乎不起作用而且我不知道我是否在这里遗漏了什么。下面是我要获取的代码:

$('#cdcTracking-list tr td').click(function() {

        var header = $('#cdcTracking-list th').eq($(this).index()).text(); //to get clicked column's header
        var trackid = $(this).siblings('td:nth-child(36)').text(); //get column at column 36
        var date = $(this).text(); //get clicked column value
});

有没有人有这方面的经验，请帮助我

Answer 1

您需要使用委托(delegate)。因为加载 dom 时没有这样的表数据。表是在通过 ajax 调用加载 DOM 后创建的。

$(document).on("click", "#cdcTracking-list tr td", function() {
    var header = $('#cdcTracking-list th').eq($(this).index()).text(); //to get clicked column's header
        var trackid = $(this).siblings('td:nth-child(36)').text(); //get column at column 36
        var date = $(this).text(); //get clicked column value
});

如果它来自 DOM 的初始加载，您也可以定位祖先(#cdcTracking-list)而不是文档，如下所示。

$('#cdcTracking-list').on("click","tr td",function(){
//code
});