JSFiddle - React, Tailwind, and code Playground

by bilbobaggins

HTML

<body>
       <table id="tblList"> </table>
     
         <ul>
            <li> <label for="txtID">ID:</label> <input type="text" id="txtID"/> </li>
            <li> <label for="txtName">Name:</label> <input type="text" id="txtName"/> </li>
            <li> <label for="txtPhone">Phone:</label> <input type="text" id="txtPhone"/> </li>
            <li> <label for="txtEmail">Email:</label> <input type="text" id="txtEmail"/> </li>
            <li> <input type="submit" value="Save" id="btnSave" /> </li>
         </ul>
     
     
   </body>

CSS

/* fallback */
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: local('Material Icons'), local('MaterialIcons-Regular'), url(https://fonts.gstatic.com/s/materialicons/v22/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format('woff2');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;

JavaScript

var operation = "A"; //"A"=Adding; "E"=Editing 
   var selected_index = -1; //Index of the selected list item 
var tblinternstorage = localStorage.getItem("tblinternstorage");   
       

 //Retrieve the stored data 
   tblinternstorage = JSON.parse(tblinternstorage); //Converts string to object 

   if (tblinternstorage == null) 
   //If there is no data, initialize an empty array 
   
   {
      tblinternstorage = [];
   }
   else
   {
   console.log(tblinternstorage);
   List();

   }


$(document).on("click", ".btnEdit", function() {
   console.log("asas")
   operation = "E";
   selected_index = parseInt($(this).attr("alt").replace("Edit", ""));
   var cli = JSON.parse(tblinternstorage[selected_index]);
   $("#txtID").val(cli.ID);
   $("#txtName").val(cli.Name);
   $("#txtPhone").val(cli.Phone);
   $("#txtEmail").val(cli.Email);
   $("#txtID").attr("readonly", "readonly");
   $("#txtName").focus();
});
$(document).on("click", ".btndel", function() {
   console.log("here")
   selected_index = parseInt($(this).attr("alt").replace("Delete", ""));
   Delete();
   List();
});

$("#btnSave").click(function() {
//  alert( "Handler for .click() called." );
if (operation == "A") 
      return Add();
      
   else
    return Edit();
});




   




 function Add() {
   var client = JSON.stringify({
      ID: $("#txtID").val(),
      Name: $("#txtName").val(),
      Phone: $("#txtPhone").val(),
      Email: $("#txtEmail").val()
   });
   tblinternstorage.push(client);
   localStorage.setItem("tblinternstorage", JSON.stringify(tblinternstorage));
   //alert("The data was saved.")
    List();
    clearall();
   return true;
 }

 function Edit() {
   tblinternstorage[selected_index] = JSON.stringify({
      ID: $("#txtID").val(),
      Name: $("#txtName").val(),
      Phone: $("#txtPhone").val(),
      Email: $("#txtEmail").val()
   }); //Alter the selected item on the table 
   localStorage.setItem("tblinternstorage", JSON.stringify(tblinternstorage));
   //alert("The...