<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Jeditable</title>
<script type="text/javascript">
$(document).ready(function(){
$(".edit").editable("Save.php",{
indicator: "Saving…",
tooltip: "Click to update",
//event: "click",
//onblur: "submit",
type: "text",
width:($("span#edit").width() + 200) + "px",
height:($("span#edit").height() + 100) + "px",
style: "display: inline",
placeholder: "Click to set text",
cancel: "取消修改",
submit: "確認修改",
callback : function(value, settings) {
//window.location.reload();
var oTable = $("#myTable").dataTable();
oTable.fnDraw();
}
});
});
</script>
</head>
<body>
<table id="myTable">
<tr>
<td><span class="edit" id="edit_1">hello world!</span></td>
</tr>
</table>
</body>
</html>
Save.php
<?php
$id = $_POST['id'];
$value = $_POST['value'];
list($field, $id) = explode('_', $id);
mysql_query("UPDATE tb_category SET $field='$value' WHERE cId='$id'");
//將值傳回前端
echo $value;
?>