//source data
const srcData = [
{id: 1, name: 'Steve Rogers', title: 'Captain America'},
{id: 2, name: 'Anthony Stark', title: 'Iron Man'},
{id: 3, name: 'Peter Parker', title: 'Spider Man'},
{id: 4, name: 'Bruce Banner', title: 'Halk'},
{id: 5, name: 'Thor Odinsson', title: 'Thor'}
];
//data table initialization
const dataTable = $('#mytable').DataTable({
data: srcData,
dom: 't',
columns: [
{data: 'id', visible: false},
{data: 'name', title: 'Name'},
//append 'Edit'/'Delete' buttons to the rightmost edge of the cell
{data: 'title', title: 'Title', render: cellData => cellData+'<button class="delete">Delete</button><button class="edit">Edit</button>'}
]
});
//delete button handler
$('#mytable').on('click', '.delete', function () {
//grab parent <tr> node of the button, use it as
//a selector to throw its id into message and
//delete corresponding dataTable row
const currentRow = dataTable.row($(this).closest('tr'));
$('#msg').text(`Row id ${currentRow.data().id} (${currentRow.data().title}) was removed`);
currentRow.remove().draw();
});
//edit button handler
$('#mytable').on('click', '.edit', function(){
$(this).closest('tr').toggleClass('editing');
if($(this).closest('tr').hasClass('editing')) {
//turn each table cell into input field
[...$(this).closest('tr').find('td')].forEach(function(td, colindex){
$(td).html(`<input value="${dataTable.cell(td).data()}"></input> ${colindex==this.length-1?'<button class="delete">Delete</button><button class="edit">Edit</button>':''}`)
}, $(this).closest('tr').find('td'));
}
else {
//grab input fields from within each cell and
//put their values into corresponding dataTable cell
[...$(this).closest('tr').find('td')].forEach(function(td, colindex){
const cellValue = $(td).find('input').val();
dataTable.cell(td).data(cellValue);
$(td).html(`${cellValue}${colindex==this.length-1?'<button class="delete">Delete</button><button class="edit">Edit</button>':''}`);
}, $(this).closest('tr').find('td'));
dataTable.draw();
}
});
td button {
display: block;
float: right;
}
<!doctype html>
<html>
<head>
<script type="application/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="application/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
</head>
<body>
<table id="mytable"></table>
<div id="msg"></div>
</body>
</html>