參考網址：https://izo.tw/jeditable/
有時候我們會懶得登入phpmyadmin，
於是我們是可以製作一個前台的 MYSQL 管理表單，即點即編。
就是設置『點擊修改表單』的功能啦。
我們需要運用到jQuery的jeditable，去製作一個PHP的頁面。
https://blog.xuite.net/kb8.gyes/free/27183210#
之前一直在想用jQuery，將mysql顯示在網頁上的表格資料，用不換頁的方式，進行修改與刪除，但是弄了好久，只有完成新增與刪除，沒有做到修改的功能，後來找到一個好用的UI，
名叫：Jeditable，下載點在此：
http://www.appelsiini.net/projects/jeditable;
大概實作一下：
先做出一個檔案：1.php
在<body></body>中加入底下標籤：
<div class="edit" id="div_1">Dolor</div>
<div class="edit_area" id="div_2">Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore
magna aliquam erat volutpat.</div>
接著命名第二個檔案：1.js
加入底下的script：
$(document).ready(function() {
$('.edit').editable('save.php', {
indicator : 'Saving…',
tooltip : 'Click to edit…'
});
$('.edit_area').editable('save.php', {
type : 'textarea', //輸入欄位的種類為textarea
cancel : '取消修改',
submit : '確認修改',
indicator : '<img src="img/indicator.gif">',
tooltip : 'Click to edit…'
});
});
參數解說一下：
editable('xxx.php')：xxx.php這個檔案為用來進行修改欄位之後，進行將資料存入mysql的php頁面
indicator：正在儲存中，要顯示給使用者看的文字訊息，也能用圖片的方式
tooltip：當滑鼠經過其上方時，要顯示的提示訊息
cancel：表單上代表取消鈕的動作
submit：表單上代表送出鈕的動作
而當按下確認修改鈕之後，將會POST兩個變數給save.php這個頁面
id=您要修改的該筆資料的識別碼&value=要修改的值
嗯，沒有錯，一個變數的名稱就是id，另一個就叫value
而如果想取不一樣的變數名稱的話，請加入底下有色的兩行
$(document).ready(function() {
$('.edit').editable(save.php', {
id : 'elementid',
name : 'newvalue'
});
});
所以save.php的頁面可以這樣寫：
###############################
$id = $_POST['id'];
$value = $_POST['value'];
//如果有改變數名稱請改成底下
//
//$id = $_POST['elementid'];
//$value = $_POST['newvalue'];
//將$_POST['id']用explode函式拆解為$field和$id兩個變數
list($field, $id) = explode('_', $id);
//mysql query
mysql_query("UPDATE tb_category SET $field='$value' WHERE cId='$id'");
//將值傳回前端
echo $value;
#############################
而如果輸入的欄位是選單鈕的話，就要加入底下有顏色的程式：
$('.editable').editable('save.php', {
data : " {'E':'Letter E','F':'Letter F','G':'Letter G', 'selected':'F'}",
type : 'select',
submit : 'OK'
});
解說一下參數
data:"{'選項一的值':'選項一在表單上顯示的名稱','選項二的值':'選項二在表單上顯示的名稱'......,'selected':'選項一的值'}",
type:'select', //輸入的欄位為選單
其中的selected就是選單預設選取的項目
而如果不想用data的方式的話，也可以改成這樣：
$('.editable').editable(save.php', {
loadurl : 'json.php',
type : 'select',
submit : 'OK'
});
而json.php的樣子是長這樣：
###############################
$array['E'] = 'Letter E';
$array['F'] = 'Letter F';
$array['G'] = 'Letter G';
$array['selected'] = 'F';
print json_encode($array);
###############################
要修飾外觀時，可以加入底下這個：
$('.editable').editable(save.php', {
cssclass:'cellcolor' //cellcolor為css檔案中的樣式名稱
style : 'display: inline' //顯示的方式
});
參數：
https://www.tad0616.net/modules/tad_book3/html.php?tbdsn=306
1.method：傳輸方法，可用post或put 2.callback：指定送出資料後要執行的函數 3.name：設定欄位name名稱 4.id：設定欄位id名稱 5.submitdata：額外要送出的資料 6.type：欄位類型，可用text、textarea、select 7.rows：textarea的列高 8.cols：textarea的欄寬 9.height：欄位高度，其值可為：auto、none或指定高度（單位為px） 10.width：欄位寬度，其值可為：auto、none或指定寬度（單位為px） 11.loadurl：在欄位中載入指定連結之內容 12.loadtype：載入連結之請求類型，可為GET或POST 13.loadtext：載入額外資料時要呈現的文字 14.loaddata：擷取編輯內容前要傳送的額外參數 15.data：預設值 16.indicator：儲存時的顯示內容，可用HTML 17.tooltip：提示說明 18.event：jquery事件，如：click或dblclick 19.submit：送出的按鈕文字 20.cancel：取消的按鈕文字 21.cssclass：要套用的class名稱，是套到該元件的上一層。 22.style：直接指定style樣式，是套到該元件的上一層。 23.select：true 或 false，當選擇文字被標記時 24.placeholder：空值時，要呈線的內容 25.onblur：該元件不在焦點上時，要進行的動作：cancel、submit、ignore或function