JSFiddle - React, Tailwind, and code Playground

by bilbobaggins

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/alasql/0.4.2/alasql.min.js"></script>
<form action="#" method="post">
  <div>
    <label for="name">Name</label>
    <input type="text" name="name" id="txtname" />
  </div>
  <div>
    <input type="radio" name="gender" value="male" checked> Male
    <br>
    <input type="radio" name="gender" value="female"> Female
    <br>
  </div>

  <p>
    <input type="submit" value="Send" />
  </p>
</form>






<table>
  <tr>
    <th>Name</th>
    <th>desc</th>
  </tr>
  <tbody id="basedataset"></tbody>
</table>
<input type="button" value="prev" onclick="previousrec()">
<input type="button" value="next" onclick="nextrec()">

JavaScript

(function($) {
  $.fn.serializeFormJSON = function() {

    var o = {};
    var a = this.serializeArray();
    $.each(a, function() {
      if (o[this.name]) {
        if (!o[this.name].push) {
          o[this.name] = [o[this.name]];
        }
        o[this.name].push(this.value || '');
      } else {
        o[this.name] = this.value || '';
      }
    });
    return o;
  };
})(jQuery);
var tblbasedata = []
var pageno = 0;
var el = document.getElementById('basedataset');

$('form').submit(function(e) {
  e.preventDefault();
  var data = $(this).serializeFormJSON();
  console.log(data);
  tblbasedata.push(data);
  localStorage.setItem("baserecord", JSON.stringify(tblbasedata));
  var list = JSON.parse(localStorage.getItem("baserecord"));
  if (localStorage.getItem("baserecord") !== null && list.length >= 0) {
    fetchAll(list);
  }
  /* Object
      email: "value"
      name: "value"
      password: "value"
   */
});




function fetchAll(list) {
  var data = '';
  //var list = JSON.parse(localStorage.getItem("baserecord"));
  // if (localStorage.getItem("baserecord") !== null && list.length >= 0) {
  for (let i = 0; i < list.length; i++) {
    data += '<tr>';
    data += '<td>' + list[i].name + '</td>';
    data += '<td>' + list[i].gender + '</td>';
    data += '<td><button onclick="Edit(' + i + ')">Edit</button></td>';
    data += '<td><button onclick="Delete(' + i + ')">Delete</button></td>';
    data += '</tr>';
  }
  //} else {
  //  console.log('please insert some recordset ')
  //}

  el.innerHTML = data;
}


function Edit(pos) {
  var el1 = document.getElementById('editVal');
  foodList = JSON.parse(localStorage.getItem("baserecord"));
  var valset = foodList[pos];
  console.log(valset)
  $("#txtname").val(valset.name)
  var $radios = $('input:radio[name=gender]');
  $radios.filter('[value=' + valset.gender + ']').prop('checked', true);
}

function CloseInput() {
  document.getElementById('edit-food').style.display = 'none'
}

function clearCache() {
 ...