Datatable inline row editing
This example demonstrate cell editing, highlights the updated row, adds row immediately below to the selected row
HTML
<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables.css">
<script src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/jquery.dataTables.min.js"></script>
<button id="insert" style="display:none;"></button>
<br>
<table class="dataTable" id="example">
<thead>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</thead>
<tbody>
<tr>
<td>Engine-1</td>
<td>Internet
Explorer 4.0</td>
<td>Win 95+</td>
<td> 4</td>
<td>X</td>
</tr>
<tr>
<td>Engine-2</td>
<td>Internet
Explorer 5.0</td>
<td>Win 95+</td>
<td>5</td>
<td>C</td>
</tr>
<tr>
<td>Engine-3</td>
<td>Internet
Explorer 5.5</td>
<td>Win 95+</td>
<td>5.5</td>
<td>A</td>
</tr>
</tbody>
</table>
JavaScript
var dataTable;
var options = {
bSort: true,
bPaginate: false,
bInfo: false,
bFilter: false
};
function initDataTable() {
dataTable = $('#example').dataTable(options);
}
function attachClickHandler() {
$("#example tbody tr").click(function(event) {
var index=$(this).index();
$("#insert").text('insert a row below the row you just clicked ('+index+')').attr('index',index).show();
});
}
$("#insert").click(function() {
var index=$(this).attr('index');
var newRow = '<tr>'+
'<td>new</td>'+
'<td>new</td>'+
'<td>new</td>'+
'<td>new</td>'+
'<td>new</td>' +
'</tr>';
dataTable.fnDestroy();
$("#example tbody tr").eq(index).after(newRow);
initDataTable();
attachClickHandler();
});
initDataTable();
attachClickHandler();