JQuery - 动态地将第三个展开行添加到表中答案

【问题标题】：JQuery - dynamically adding a 3rd expand row to a tableJQuery - 动态地将第三个展开行添加到表中
【发布时间】：2016-05-09 10:03:37
【问题描述】：

我在 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”数据对象时，我是否使用不同的事件方法（以及什么？）来捕获。

谢谢

【问题讨论】：

标签： javascript jquery datatables

【解决方案1】：

如果您使用 jQuery 方法而不是字符串来创建您的第二层，您可以轻松地将点击事件附加到它，然后使用它来展开第三层

...
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/

【讨论】：