按钮单击获取数据表的行数据

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); 

    }); 

});