[英]unable to delete newly added rows on the table with dataTable jquery
我有一個html表,該表的內容來自使用ajax和php的數據庫。
當我嘗試通過填充所有輸入手動添加新行並單擊保存按鈕時,它將把數據添加到表中。
我的問題是,當我嘗試刪除新添加的行並在該行中單擊“刪除”按鈕時,該行不會被刪除。 但是,當我嘗試刪除來自數據庫的行時,會將其從html表中刪除。
腳本:
$.ajax({
url: 'process.php',
type: 'post',
data: {tag: 'getData'},
dataType: 'json',
success: function(data){
if(data.success){
$("#myTable2 tbody").empty();
$.each(data, function(index, record){
if($.isNumeric(index)){
var row = $("<tr />");
$("<td />").text(record.name).appendTo(row);
$("<td />").text(record.age).appendTo(row);
$("<td />").text(record.gender).appendTo(row);
$("<td />").html(record.action).appendTo(row);
row.appendTo("#myTable2 tbody");
}
})
}
var oTable = $('#myTable2').DataTable();
$("#myTable2 tbody .dltRow").bind( 'click', function(event) {
var row = $(this).closest('tr').get(0);
oTable.row(row).remove().draw();
oTable.row($(this).closest('tr')).remove().draw();
$(this).parent().parent().closest('tr').remove();
oTable.fnDeleteRow(oTable.fnGetPosition(row));
});
$('#Save2').on( 'click', function () {
var data = [
$('#name').val(),
$('#age').val(),
$("[name='gender']:checked").val(),
"<center><button type='button' class='btn btn-default dltRow'><i class='glyphicon glyphicon-trash'></i></button></center>"
];
oTable.row.add(data).draw();
});
}
});
使用事件委托將事件附加到動態添加的刪除按鈕。
$("#myTable2 tbody").on( 'click','.dltRow', function(event) {
var row = $(this).closest('tr').get(0);
oTable.row(row).remove().draw();
oTable.row($(this).closest('tr')).remove().draw();
$(this).parent().parent().closest('tr').remove();
oTable.fnDeleteRow(oTable.fnGetPosition(row));
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.