Jeditable是一個用來達成「就地編輯」（Edit In Place）目的的jQuery plugin，以下簡單介紹這個外掛的用法，以及如何將編輯完成的內容更新到MySQL資料表中。

在本文的範例中，要更新的是如下的資料表：

通常我們會把資料表的資料拉到網頁裡，如下圖，前兩個欄位即是要利用Jeditable來編輯的資料。第一欄（對應資料表category欄）要使用文字框（text input）來編輯，第二欄（對應資料表parent欄）則是用下拉選單（select）編輯。

將要更新的資料以div包住，並加上class和id屬性。請注意id值的數字是用php動態產生的，即是資料表的cId欄位值：

使用這個外掛的語法如下：

在這幾個參數裡面，第一個參數「save.php」即是將更新內容存入資料庫的後端處理程序，其他的參數應該不難理解；比較值得介紹的是「loadurl」這個參數，如果我們希望動態產生下拉選單的內容，就必須使用loadurl來加入外部資料。這個部份請參閱Jeditable官方網頁的「How to use selects?」一節。

完成上述步驟後，就地編輯就會開始作用了。點擊可編輯的文字時，Jeditable會自動產生一張表單，在本例中會依照「type」參數的設定，出現文字框或下拉選單：

按下「修改」送出表單時，Jeditable預設後端（save.php）會接收到兩個POST變數：$_POST['id']和$_POST['value']（變數名稱也是預設的，可以使用id和name兩個參數修改）。$_POST['id']的值等於前述放在div裡的id值，$_POST['value']則是在表單欄位內輸入的值。

後端（save.php）更新資料表的程式碼如下（參考來源：DeviLib.com）：

完成後的成品網頁請按此測試。有個缺憾是，這個外掛無法直接搭配jQuery Validation一起使用，必須另行客製（有善心人士可以提供嗎？），所以我是用php在後端做資料驗證的。想了解更多資訊，請務必到Jeditable官方網頁一遊。有任何的問題指教，也歡迎與我討論。

在jQuery底下，要檢查某元素是否存在，我ㄧ開始是這樣寫的：

原本一切看似正常，後來卻發現，某個頁面明明沒有#myid，但是底下的alert動作仍然照常執行。

Google一下，在jQuery HowTo’s正好有解答。原來使用$()呼叫物件時，jQuery永遠是有求必應地傳回物件給我們。所以上面這個條件式永遠都成立，有寫跟沒寫一樣。

正牌的寫法，是要利用jQuery傳回陣列的特性，用length來檢查陣列長度：

當然直接用getElementById來寫也是可以的：

很久以前在Smiley Cat看過一篇教學，將整個區塊元素變成可連結，並且在滑鼠移過時變換背景顏色：

要完成這個效果，有兩個重點：

• 必須讓整個區塊產生滑鼠移過會改變背景顏色的hover effect。
• 必須讓整個區塊可以連結。

在Smiley Cat的教學中，利用CSS設定將 a 元素改為display:block，因為 a 元素除了可以連結之外，在CSS中，又能使 :hover 這個偽類別（pseudo-classes）產生作用（:hover如果不用在 a 元素，而用在其他區塊元素如 li:hover，IE 6是不支援的）。

而最近Web Designer Wall則有一篇jQuery十大特效的教學（jQuery Tutorials for Designers），裡面的第六項：Entire block clickable，提到如何用jQuery來達成相同的效果。我借用了它的XHTML原始碼與部份的CSS，並做了一點修改，讓區塊變換背景顏色與連結的效果都採用JQuery控制，成果請見demo頁面。 | 繼續閱讀…