Datatable inline row editing

This example demonstrate cell editing, highlights the updated row, adds row immediately below to the selected row

by Anil D

HTML

<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables.css">
<script src="http://jquery-datatables-editable.googlecode.com/svn/trunk/media/js/jquery.dataTables.editable.js"></script>
<script src="http://www.appelsiini.net/projects/jeditable/jquery.jeditable.js"></script>
<script src="//cdn.datatables.net/1.10.3/js/jquery.dataTables.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
Select any col/row to add col/row after/below it<br/>
<button type="button" id="btnAddRow">Add new row</button>
<button type="button" id="btnAddCol">Add new column</button>
<br>
<table class="dataTable" id="example">
</table>

JavaScript

var data_table, row_num=1, col_num=3, row_cell=1, col_cell=0, iter=0;
var cols = [
    { "mDataProp": "Field1", sTitle: "Date", sType : "date"},
    { "mDataProp": "Field2", sTitle: "Number", sType : "numeric"},
    { "mDataProp": "Field3" , "sTitle": "FName", sType : "string"},
    { "mDataProp": "Field4" ,  sTitle: "LName", sType : "string"}
];

 
//Get stored data from HTML table element
var results = [{
       Field1: "2011/04/23",
       Field2: 8,
       Field3: "Adam",
       Field4: "Den"},
      {
       Field1: "2011/03/25",
       Field2: 6,
       Field3: "Honey",
       Field4: "Singh"}
    ];
 
function initDT(){
    //Construct the measurement table
    data_table = $('#example').dataTable({
        "bJQueryUI": true,
        "bDeferRender": true,
        "bInfo" : false,
        "bSort" : false,
        "bDestroy" : true,
        "bFilter" : false,
        "bPagination" : false,
        "aaData": results,
        "aoColumns": cols,
    });
    attachTableClickEventHandlers();
}

initDT();

function attachTableClickEventHandlers(){
  //row/column indexing is zero based
  $("#example thead tr th").click(function() {     
            col_num = parseInt( $(this).index() );
            console.log("column_num ="+ col_num );   
    });
    $("#example tbody tr td").click(function() {     
            col_cell = parseInt( $(this).index() );
            row_cell = parseInt( $(this).parent().index() );    
            console.log("Row_num =" + row_cell + "  ,  column_num ="+ col_cell );
    });  
};


$("#btnAddRow").click(function(){
    //adding/removing row from datatable datasource
    //create test new record
    var aoCols = data_table.fnSettings().aoColumns;
    var newRow = new Object();
    for(var iRec=0; iRec<aoCols.length; iRec++){
        
        if(aoCols[iRec]._sManualType === "date"){
            newRow[aoCols[iRec].mDataProp] = "2011/03/25";
        }else if(aoCols[iRec]._sManualType === "numeric"){
           ...