Datatable inline row editing

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

by Tamil

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>
<!DOCTYPE html>
<html>

<head>
  <script data-require="jquery@*" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script data-require="datatables@*" data-semver="1.10.12" src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
  <script src="dataTables.rowReorder.js"></script>
  <link data-require="datatables@*" data-semver="1.10.12" rel="stylesheet" href="//cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" />
  <link rel="stylesheet" href="//cdn.datatables.net/rowreorder/1.2.0/css/rowReorder.dataTables.min.css" />
  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">


<style>
div.addRow{
      line-height: 45px;
    background-color: #fff;
    padding-left: 10px;
    border-bottom: 1px solid;
    border-top: 1px solid #e5e5e5;}
</style>
</head>

<body>
  <table id="example" class="display" width="100%" cellspacing="0">
    <thead>
      <tr>
        <th>order</th>
        <th>name</th>
        <th>country</th>
        <th>action</th>
      </tr>
    </thead>
  </table>

  
  



</body>

</html>

JavaScript

var table;

      $("#example").on('mousedown.edit', "i.fa.fa-pencil-square", function(e) {
        $(this).removeClass().addClass("fa fa-envelope-o");
        var $row = $(this).closest("tr").off("mousedown");
        var $tds = $row.find("td").not(':first').not(':last');
        $.each($tds, function(i, el) {
          var txt = $(this).text();
          $(this).html("").append("<input type='text' value=\""+txt+"\">");
        });
      });

      $("#example").on('mousedown', "input", function(e) {
        e.stopPropagation();
      });

      $("#example").on('mousedown.save', "i.fa.fa-envelope-o", function(e) {
        
        $(this).removeClass().addClass("fa fa-pencil-square");
        var $row = $(this).closest("tr");
        var $tds = $row.find("td").not(':first').not(':last');        
        $.each($tds, function(i, el) {
          var txt = $(this).find("input").val()
          $(this).html(txt);
        });
      });
      
      
       $("#example").on('mousedown', "#selectbasic", function(e) {
        e.stopPropagation();
      });
      

      var url = 'http://www.json-generator.com/api/json/get/ccTtqmPbkO?indent=2';
      table = $('#example').DataTable({
        ajax: url,
        rowReorder: {
          dataSrc: 'order',
          selector: 'tr'
        },
        columns: [{
          data: 'order'
        }, {
          data: 'place'
        }, {
          data: 'name'
        }, {
          data: 'delete'
        }]
      });