PHP Live Edit Table Example

PHP Live Edit Table Example

Today We See How To Make Live Editable Using PHP+JS+Mysql+Ajax

Let's Start.

For Updating Data Live in Our Database.

1. Let's First Going TO Start My Server.

2.Opening PHPMyadmin and Creating a Database Named "live"

and also a table name "live_data".

live.php (code )  //Our View Page

<?php
include 'connect.php';
//==========Checked Connection Establish or Not.==============
if(!$con1){

	echo "Failed TO Establish Database Connection";
	die();
	//===========Stop Execution if connection failed============

}
else{
	//===========Fetching Result from table live_data==================
	$qr=mysql_query("select * from live_data");

	//=========adding border so it look good===============
	echo "<table style='border-collapse:collapse;' border='1'>";

	//============adding heading for each column=========================
	echo "<tr><th>ID</th><th>NAME</th><th>DOB</th><th>Qualification</th></tr>";
	while ($row=mysql_fetch_assoc($qr)) {

		//============Printing All Data in Table Row========

		//============data is html5 attribute for adding exta information on html page===
		echo "<tr>";
		echo "<td class='id' data-id='".$row['id']."' >".$row['id']."</td>";
		echo "<td class='item' data-name='name'>".$row['name']."</td>";
		echo "<td class='item' data-name='dob'>".$row['dob']."</td>";
		echo "<td class='item' data-name='qualification'>".$row['qualification']."</td>";
		echo "</tr>";
	}
	echo "</tr>";
}
?>
<script  src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
	//===========Events Call When Our Page is Ready======
	$(document).ready(function() {
		

		//=============adding double click event on each table cell==========
		$(document).on("dblclick",".item",function(){

			//=======get The Value Of Current Selected TD using this keyword======
			var values=$(this).text();
			$(this).html("<input value='"+values+"' class='input'>");

		});

		$(document).on("blur",".input",function(){

			var vales=$(this).val();

sendToServer($(this).val(),$(this).parent("td").parent("tr").children(".id").data("id"),$(this).parent("td").data("name"));
									$(this).parent("td").text(vales);
			                      $(this).remove();
		})




function sendToServer(value,id,key){



			$.ajax({
				url: 'api.php',
				type: 'POST',
				data: {key:key,id:id,value:value},
			})
			.done(function(data) {
				alert(data);
			})
			.fail(function() {
				alert("Network error");
			});

			}

	})
</script> 

connect.php (Database Connection file)
 

<?php
//================+Connecting Database================
$con=mysql_connect("localhost","root","");

//=============Selecting Database======================
$con1=mysql_select_db("live",$con);

api.php (Our Api Which Update Our Date When We Post Through Ajax)
 

<?php
include 'connect.php';
if($_REQUEST['key']=="name"){
$qr=mysql_query("UPDATE live_data set name='".$_REQUEST['value']."' where id='".$_REQUEST['id']."'");
echo "Updated";
}
else if($_REQUEST['key']=="dob"){
$qr=mysql_query("UPDATE live_data set dob='".$_REQUEST['value']."' where id='".$_REQUEST['id']."'");
echo "Updated";	
}
else if($_REQUEST['key']=="qualification"){
	$qr=mysql_query("UPDATE live_data set qualification='".$_REQUEST['value']."' where id='".$_REQUEST['id']."'");
echo "Updated";
}
else{
	echo "Key Not Found";
}

Video Tutorial