jQuery-向表中動態添加第三個擴展行

Question

我通過使用JQuery中的DataTable創建一個表（在documentReady上）。

table = $('#transaction').DataTable({
            "ajax": {
                "url": "servicingTransactionsLoad.do",
                "type": "GET",
                "dataSrc": function (json) {
                    for (var i = 0, ien = json.transactions.length; i < ien; i++) {
                        json.transactions[i].date = '<i class="icon-expand-handle color--secondary9 fa fa-plus"></i> ' + json.transactions[i].date;                            
                    }
                    return json.transactions;
                }
            },
            "columns": [
                { "data": "date" },         
                { "data": "description" },
                { "data": "channel" },
                { "data": "amount" }
            ],
            "order": [
                [ 0, "desc" ]
            ]
        });

當您單擊該行以展開並提供其他信息時，我將觸發一個事件：

    $('#transaction tbody').on('click', 'tr', function () {
            var tr = $(this).closest('tr');
            var row = table.row( tr );

            if ( row.child.isShown() ) {
                // This row is already open - close it
                row.child.hide();
                tr.removeClass('shown');
                tr.find('.icon-expand-handle').removeClass('fa-minus');
                tr.find('.icon-expand-handle').addClass('fa-plus');
            }
            else {
                // Open this row
                row.child( createExpand2(row.data()) ).show();
                tr.addClass('shown');
                tr.find('.icon-expand-handle').removeClass('fa-plus');
                tr.find('.icon-expand-handle').addClass('fa-minus');
            }
});

createExpand2是一種構建表的方法，該表將作為子表添加以提供額外的信息。

function createExpand2 (d) {
   // `d` is the original data object for the row
    return '<table width="100%" border="0" cellspacing="0" cellpadding="0">'+
        '<tr>'+
            '<td class="col-sm-3">Date Posted:'+
            '<br>' + d.datePosted+'</td>'+
            '<td class="col-sm-4">Merchant'+
            '<br>' + d.merchantName + '</td>'+
            '<td class="col-sm-3"></td>'+
            '<td class="col-sm-3">Miles Value'+
            '<br>'+ d.milesValue + '<br><a href="javascript:void(0);">Show calculation and detail</a></td>' +
        '</tr>'+
    '</table>';
}

現在，如果單擊href鏈接，則需要將該行擴展到第三級。 我基本上想調用類似於expand2的方法。 它應該將相同的數據傳遞到方法中（因為我將只使用該對象的不同部分）。 我不確定下一步是什么。 當前，如果我單擊第一個孩子，我會在控制台中看到一個錯誤（我認為這是因為單擊表的任何行都會觸發該事件）。 那么，是否只需要使用某種IF語句修改expand2（以確定我們是在主行還是子行上）？ 還是當您單擊href鏈接以打開第三行並仍然可以訪問“ d”數據對象時，是否使用其他事件方法（以及什么方法）來捕獲。

謝謝

Answer 1

如果您使用jQuery方法而不是字符串創建第二級，則可以輕松地將click事件附加到第二級，然后使用它擴展第三級

...
click_link = $('<a></a>').html('clickable link');
click_link.on('click', function(e){
  // function to show 3rd row
  createExpand3(table);
})

該鏈接動態顯示了構建行，您可以向其中添加點擊偵聽器

https://jsfiddle.net/stevenkaspar/ysod0ghz/