PHP MySQL Inline Editing Dynamically using jQuery Ajax

PHP MySQL Inline Editing Dynamically using jQuery Ajax

In this Post We Will Explain About is PHP MySQL Inline Editing Dynamically using jQuery Ajax – Inline TABLE With Example and Demo.Welcome on – Examples, The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to Update mysql table using ajax and phpExample

In this post we will show you Best way to implement Live table edit using jQuery, AJAX and PHP – jQuery Ajax PHP, hear for Ajax table Add Edit Delete Rows Dynamically Using jQuery PHPwith Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.

In this POST Example, we are using Simple HTML table to All the Manager list database results. We simple add the content all data Editable form input attribute to the table new cells to new allow inline editing on jquery and ajax clicking cell view.

Free Live Chat for Any Issue

Following files needed for this inline edit example


External Libs. Add

<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css"/>

DataBase Table and Records

'id' int(11) NOT NULL AUTO_INCREMENT COMMENT 'primary key',
'man_name' varchar(255) NOT NULL COMMENT 'manager name',
'man_salary' double NOT NULL COMMENT 'manager man_salary',
'man_age' int(11) NOT NULL COMMENT 'manager age',
) ENGINE=InnoDB DEFAULT CHARSET=latin1 COMMENT='datatable demo table' AUTO_INCREMENT=58 ;
INSERT INTO 'manager' ('id', 'man_name','man_salary', 'man_age') VALUES
(1, 'ravi dholakiya', 380800, 48),
(2, 'jigar shah', 176750, 77),
(3, 'Ankit Pipaliya', 86000, 78),
(4, 'Naredra Modi', 439060, 55),
(5, 'yogi swami', 162700, 45),
(6, 'borak Aobama', 372000, 45),
(7, 'swati Dethariya', 189500, 59),
(8, 'kajal piparva', 327900, 55),
(9, 'sejal ramani', 205590, 77),
(10, 'swati bganderi', 109600, 25);


$server_name = "localhost";
$username = "root";
$password = "";
$dbname = "";
$conn = mysqli_connect($server_name, $username, $password, $dbname) or die(" simple Connection failed: " . mysqli_connect_error());


$sql = "SELECT id, man_name, man_salary, man_age FROM manager LIMIT 10";
$res_query = mysqli_query($conn, $sql) or die("database error:". mysqli_error($conn));
<table class="table table-condensed table-hover table-striped bootgrid-table">
<th>manager Name</th>
while( $data_results = mysqli_fetch_assoc($res_query) ) {
<td contenteditable="true" data-old_value="<?php echo $data_results["man_name"]; ?>" onBlur="datasaveInlineEdit(this,'man_name','<?php echo $data_results["id"]; ?>')" onClick="highlightEdit(this);"><?php echo $data_results["man_name"]; ?></td>
<td contenteditable="true" data-old_value="<?php echo $data_results["man_salary"]; ?>" onBlur="datasaveInlineEdit(this,'man_salary','<?php echo $data_results["id"]; ?>')" onClick="highlightEdit(this);"><?php echo $data_results["man_salary"]; ?></td>
<td contenteditable="true" data-old_value="<?php echo $data_results["man_age"]; ?>" onBlur="datasaveInlineEdit(this,'man_age','<?php echo $data_results["id"]; ?>')" onClick="highlightEdit(this);"><?php echo $data_results["man_age"]; ?></td>


function datasaveInlineEdit(editparmvalue,coldata,id) {
// no change any data change made then return simple boolian false
if($(editparmvalue).attr('data-old_value') === editparmvalue.innerHTML)
return false;
// send from ajax to PHP update value mysqli
$(editparmvalue).css("background","#FFF url(loader.gif) no-repeat right");
url: "datasaveInlineEdit.php",
type: "POST",
dataType: "json",
success: function(response) {
// set updated value as simple old value
error: function () {


$sql = "UPDATE manager set " . $_POST["coldata"] . " = '".$_POST["value"]."' WHERE id=".$_POST["id"];
mysqli_query($conn, $sql) or die("simple database error:". mysqli_error($conn));


I hope you have Got What is Inline Editing using PHP MySQL and jQuery Ajax And how it works.I would Like to have FeadBack From My Blog( readers.Your Valuable FeadBack,Any Question,or any Comments abaout This Article( Are Most Always Welcome.

Rate this post