CRUD form using Datatables with dynamic Add & Delete rows

Hope you guys have suffered same issues as me with Web Development to create forms with Create/Read/Update/Delete functionality. I really use "Datatables" (www.datatables.net) for displaying data in tabular format. Datatables has got many advantages and is easily compatible with bootstrap stylings.

IE8+ support, major browser support and uses jQuery as its core
Can natively map JSON data
Searching and Filtering functionality with pagination Support
MultiLanguage support, ClientSide Sorting, AJAX based inputs
Can filter required Columns at front-end

Datatables is free but it's editor (editable tables) are paid. Hence I thought of putting together a simple table to use for editing and publishing data for POST purposes.

In Summary, what we are doing here is

Creating HTML stub with table headers within a form. Also add "Add Row" and "Delete Row" buttons with onclick actions attached to it and a "Submit" button

In your javascript, "on document load" create a datatable with built in "input=text" form for rows. This can be done using fnAddData

    function addRow() {
      $('table#myTable').dataTable().fnAddData([
        'input type="text" class="first_name" id="first_name_' + count + '">',   // Note the class name
        'input type="text" class="last_name" id="last_name_' + count + '">'
      ]);
  count++;
}

Similarly for "Delete Row" action, bind it to

 $("table#myTable").dataTable().fnDeleteRow(count - 1);

Using "Add Row" and "Delete Row" you can add/remove any number of rows.
When you Click the Submit button, the dataTable is scanned and fetched as Key-Value object pair. This is pushed into a JSON object Array.

      $("#submitButton").click(function() {
        oTable = $('#myTable').dataTable();
        var numColumns = oTable.fnGetData(0).length;
        var rules = [];                                     
    $.each(oTable.fnGetData(), function(i, row) {
      var rec = {};
      for (var c = 0; c &lt; numColumns; c++) {
       // Extracting Class name as KEY
        var key = ($(row[c]).attr('class'));  
       // Dynamic Rows as VALUE          
        var value = ($('#' + key + '_' + i).val());     
        rec[key] = value;
      }
      rules.push(rec);

    })

    alert(JSON.stringify(rules));


  });

Below is Sample of editable Datatables

Pure web-based create/read/update/delete (CRUD) table with AJAX post functionality