Click here to Download

Index.php

(HTML Editable Content)

<table class=”mytab”>
<thead>
<tr>
<th class=”title” width=”10%”>S.No.</th>
<th class=”title”>First Name</th>
<th class=”title”>Last Name</th>
</tr>
</thead>
<tbody>
<?php
$i =1;
$sql = mysql_query(“SELECT * from php_interview_questions”);
while($faq = mysql_fetch_array($sql)) { ?>
<tr class=”table-row”>
<td><?php echo $i ; ?></td>
<td contenteditable=”true” onBlur=”saveToDatabase(this,’question’,'<?php echo $faq[“id”]; ?>’)” onClick=”showEdit(this);”><?php echo $faq[“question”]; ?></td>
<td contenteditable=”true” onBlur=”saveToDatabase(this,’answer’,'<?php echo $faq[“id”]; ?>’)” onClick=”showEdit(this);”><?php echo $faq[“answer”]; ?></td>
</tr>
<?php $i++;  }  ?>
</tbody>
</table>

jQuery AJAX:

<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script>
function saveToDatabase(editableObj,column,id) {
$(editableObj).css("background","#FFF url(loader.gif) no-repeat right");
$.ajax({
url: "saveedit.php",
type: "POST",
data:'column='+column+'&editval='+editableObj.innerHTML+'&id='+id,
success: function(data){
$(editableObj).css("background","#FDFDFD");
}        
});
}
</script> 

PHP MySQL Update query:

<?php
require_once("db.php");
$result = mysql_query("UPDATE php_interview_questions
set " . $_POST["column"] . " = '".$_POST["editval"]."'
 WHERE  id=".$_POST["id"]);
?>

Click here to Download