Basic Crud operations

jquery based crud operations

by bilbobaggins

HTML

<form id="frmCadastre" method="post" onsubmit="sub(); return false;"> 
  <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> 
</form> 
<table id="tblList"> 
</table>

JavaScript

var operation = "A"; //"A"=Adding; "E"=Editing 
  var selected_index = -1; //Index of the selected list item 
  var tbClients = localStorage.getItem("tbClients");//Retrieve the stored data 
  tbClients = JSON.parse(tbClients); //Converts string to object 
$(function(){ 
  if(tbClients == null) //If there is no data, initialize an empty array 
  tbClients = []; 
}); 

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

function Edit(){ 
  tbClients[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("tbClients", JSON.stringify(tbClients)); 
  alert("The data was edited.");
  operation = "A"; //Return to default value  
  List();
  return true;
} 

function Delete(){ 
  tbClients.splice(selected_index, 1); 
  localStorage.setItem("tbClients", JSON.stringify(tbClients)); 
  alert("Client deleted."); 
} 

function List(){	
	$("#tblList").html(""); 
  $("#tblList").html( "<thead>"+ "	<tr>"+ "	<th></th>"+ "	<th>ID</th>"+ "	<th>Name</th>"+ "	<th>Phone</th>"+ "	<th>Email</th>"+ "	</tr>"+ "</thead>"+ "<tbody>"+ "</tbody>" ); 			for(var i in tbClients){ 
  var cli = JSON.parse(tbClients[i]); 
  $("#tblList tbody").append("<tr>"+ "	<td><img src='edit.png' alt='Edit"+i+"' class='btnEdit'/><img src='delete.png' alt='Delete"+i+"' class='btnDelete'/></td>" + "	<td>"+cli.ID+"</td>" + "	<td>"+cli.Name+"</td>" + "	<td>"+cli.Phone+"</td>" + "	<td>"+cli.Email+"</td>" + "</tr>"); } 
}

//$("#frmCadastre").bind("submit",function(){ 
function sub(){
	if(operation == "A") 
  	return Add(); 
  else 
  	return Edit();	
}
//});...