(黑暗執行序) 以jQuery實現可編輯
網頁以<table>方式呈現數據矩陣,希望能做到在某一格(<td>)點兩下可以直接編輯格子文字內容,按Enter或點選其他格子結束編輯狀態,並將該格內容更新為剛才輸入結果。
介面如下圖所示,在<td>V11</td>上點兩下,V11就變成<input value=”V11”>,使用者可將<input>的值改成ZZZ,當按Enter或點其他<td>,該格內容就變成<td>ZZZ</td>。
這個需求要用jQuery實現並不難: 在<td>上掛dblclick事件,將<input type=”text”>放入td中,val()就設成td原本的text();另外設定<input>的keydown及所有<td>的click事件,執行td.text(input.val())取input值寫成td內容就大功告成囉!