按鈕單擊獲取數據表的行數據

Question

我有一個this項目的問題。

我試圖創建一個crud菜單，當點擊Edit按鈕時，該行的數據將被轉移到一個引導模式，並從那裏用戶將能夠編輯。

問題：現在點擊行時 - 模式可以完全打開行數據 - 但是當我試圖通過按下按鈕（'.edit_btn'）來獲取數據時，它無法工作。我知道按鈕不保存任何數據 - 所以這就是爲什麼它可能不工作....

$('#example tbody').on('click', '.edit_btn', function() { // works only 
    when replacing 'tr' with '.edit_btn' // 
    var data_row = table.row(this).data(); // row's data 

    $("#myModal").modal('show'); 

    $('#myModal').on('shown.bs.modal', function() { 

     $('#name').val(data_row.id); 
     $('#type').val(data_row.type); 
     $('#camp').html(data_row.campaign); 

    }); 

}); 

感謝

Answer 1

我將使用委派的事件處理程序tbody .edit_btn搶行通過closest('tr')：

$('#example').on('click', 'tbody .edit_btn', function() { 
    var data_row = table.row($(this).closest('tr')).data(); 
    ... 
}) 

分叉plunkr - >https://plnkr.co/edit/58vkkp3M6d68uuMknXus?p=preview

Answer 2

明白了...

$('#example tbody').on('click', '.edit_btn', function() { 

    var data_row = table.row($(this).parents('tr')).data(); // here is the change 
    $("#myModal").modal('show'); 

    $('#myModal').on('shown.bs.modal', function() { 

     $('#name').val(data_row.id); 
     $('#type').val(data_row.type); 
     $('#camp').html(data_row.campaign); 

    }); 

});