PHP Inline Editing Table using jQuery Ajax

PHP Inline Editing Table using jQuery Ajax

Today, We want to share with you PHP Inline Editing Table using jQuery Ajax.
In this post we will show you Inline Editing using PHP MySQL and jQuery Ajax, hear for Inline Table Editing With jQuery And PHP we will give you demo and example for implement.
In this post, we will learn about PHP MySQL Inline Editing using jQuery Ajax with an example.

Sample database fullnames table columns productname, productdesc and this post Inline Edit with PHP, MYSQL & jQuery Ajax


`id` int(8) NOT NULL,
  `productname` text NOT NULL,
  `productdesc` text NOT NULL,
  `row_order` int(8) NOT NULL

INSERT INTO `products` (`id`, `productname`, `productdesc`, `row_order`) VALUES
(1, 'Mobile', 'Smart Phone', 3),
(2, 'Laptop','mini laptop', 4),
(3, 'games', 'test', 1),
(4, 'Antivirus', 'mini virus', 0),
(5, 'redmiii', 'smart table', 2);


PHP database configuration file : dbcontroller.php

/* Databse connection*/
class DBController {
	private $host = "localhost";
	private $user = "root";
	private $password = "";
	private $database = "w2way";
	private $conn;
	/* load construct */
	function __construct() {
		$this->conn = $this->connectDB();
	/* load connectDB function*/
	function connectDB() {
		$conn = mysqli_connect($this->host,$this->user,$this->password,$this->database);
		return $conn;
	/* Execute query in php*/
	function runQuery($query) {
		$result = mysqli_query($this->conn,$query);
		while($row=mysqli_fetch_assoc($result)) {
			$resultset[] = $row;
			return $resultset;
	/*Total No of count data in php*/
	function numRows($query) {
		$result = mysqli_query($this->conn,$query);
		$rowcount = mysqli_num_rows($result);
		return $rowcount;	
	/* execcute update query*/
	function executeUpdate($query) {
        $result = mysqli_query($this->conn,$query);        
		return $result;		


Simple PHP code, updating tables records.

$db_handle = new DBController();
$result = $db_handle->executeUpdate("UPDATE products set " . $_POST["column"] . " = '".$_POST["editval"]."' WHERE  id=".$_POST["id"]);;


Create index.html HMTL file and add simple following css and jquery libraries in it.PHP MySQL Inline Editing using jQuery Ajax

$db_handle = new DBController();
$sql = "SELECT * from products";
$rowproduct = $db_handle->runQuery($sql);
      <title>PHP MySQL Inline Editing using jQuery Ajax</title>

		<script src=""></script>
		//Contains javascipt code.
		function SaveEditData(editableObj) {
		function savedataall(editableObj,column,id) {
			$(editableObj).css("background","#FFF url(loaderIcon.gif) no-repeat right");
				url: "saveedit.php",
				type: "POST",
				success: function(data){
	   <table class="tbl-data">
				<th class="table-headerdata" width="10%">Product No</th>
				<th class="table-headerdata">productname</th>
				<th class="table-headerdata">productdesc</th>
		  foreach($rowproduct as $k=>$v) {
			  <tr class="table-row">
				<td><?php echo $k+1; ?></td>
				<td contenteditable="true" onBlur="savedataall(this,'productname','<?php echo $rowproduct[$k]["id"]; ?>')" onClick="SaveEditData(this);"><?php echo $rowproduct[$k]["productname"]; ?></td>
				<td contenteditable="true" onBlur="savedataall(this,'productdesc','<?php echo $rowproduct[$k]["id"]; ?>')" onClick="SaveEditData(this);"><?php echo $rowproduct[$k]["productdesc"]; ?></td>

Related FAQ

Here are some more FAQ related to this Article:

  1.   How to Open URL in New Tab using Vue JS
  2.   vuejs Dynamic CSS-SCSS Example
  3.   Reusable AJAX Functions (Post/Get)
  4.   laravel 8 login and registration example | Laravel 8 Auth
  5.   Get HTML source code of page with php - Scrape
  6.   Get multiple checkbox value using jquery PHP
  7.   Angular 2 interview questions Answers
  8.   How to write PHP code inside of Laravel Blade template?
  9.   How to get last inserted id in Laravel
  10.   Remove null from array Jquery Example