JQuery - 動的に3番目の展開行をテーブルに追加する

Question

JQueryでDataTableを使用してテーブルを作成します（on documentReady）。

$('#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を与えるために子として追加されるテーブルを構築する方法である：

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" ] 
      ] 
     }); 

私は拡大し、余分な情報を与えるためにあなたが行をクリックして火災のイベントを持っています余分な情報。

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リンクをクリックすると、行を3番目のレベルに拡張する必要があります。私は基本的にexpand2に似たメソッドを呼びたいと思っています。それはメソッドに渡される同じデータを持っているはずです（私はそのオブジェクトの異なる部分を使用します）。私は次のステップが何であるか分かりません。現在のところ、最初の子をクリックすると、コンソールにエラーが表示されます（テーブルの行をクリックするとイベントが発生したと想定します）。だから、私はちょうどある種のIF文でexpand2を変更するだけです（私たちがメイン行か子かを判断するために）？または、hrefリンクをクリックして3番目の行を開き、引き続き「d」データオブジェクトにアクセスするときに、別のイベントメソッド（とは何か）を使用してキャッチしますか？

おかげ

Answer 1

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

をあなたはjQueryのメソッドの代わりの文字列を使用して、第二のレベルを作成した場合、あなたは簡単にイベントをクリックして添付することができ、その後、

3番目のレベルを展開することを使用してこのリンクは建物を示していクリックリスナーを追加できる動的な行数