dataTable Example DiaryFolio.com

<!DOCTYPE html>
<html>

<head>
  <title>DataTables add/delete rows example - DiaryFolio.com</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
  <script src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
  <style media="screen" type="text/css">
    html {
      font-family: verdana, sans-serif;
    }
  </style>
  <script type="text/javascript">
    var count = 0;

    $(document).ready(function() {
      $('table#myTable').dataTable({
        'bFilter': false,
        'bInfo': false,
        'bPaginate': false,
      });

      // Add initial row
      addRow();


      $("#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 < numColumns; c++) {
            var key = ($(row[c]).attr('class'));
            var value = ($('#' + key + '_' + i).val());
            rec[key] = value;
          }
          rules.push(rec);

        })

        alert(JSON.stringify(rules));


      });

    });

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

      count++;
    }

    function deleteRow() {
      if (count != 1) {
        $("table#myTable").dataTable().fnDeleteRow(count - 1);

        count--;
      }
    }
  </script>
</head>

<body>
  <div id="controlButtons">
    <button onclick="addRow();">Add row</button>
    <button onclick="deleteRow();">Delete row</button>
  </div>

  <form action="" method="POST">
    <table id="myTable">
      <thead>
        <tr>
          <th>First name</th>
          <th>Last name</th>
        </tr>
      </thead>
      <tbody>
      </tbody>
    </table>
    <button type="button" id="submitButton" class="btn btn-default">Submit</button>

  </form>


</body>

</html>

// Code goes here

/* Styles go here */