最近工作中有這么個需求。
點擊文字可編輯，離開保存，於是研究了下。代碼如下
html
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>可以編輯的表格</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js" type="text/javascript"></script>
</head> <body> <!--一個簡單的表格，一行兩列，我們讓表格里的數據點擊后可以修改--> <table > <tbody> <tr> <td>123321</td> <td>123456</td> </tr> </tbody> </table> </body> </html>
JS
//在頁面裝載是讓所有的td都擁有一個點擊事件 $(document).ready(function(){ //找到所有的td節點 var tds = $("td"); //給所有的td節點增加點擊事件 tds.click(tdclick); }); //td的點擊事件 function tdclick(){ //保存當前的td節點 var td = $(this); //1.取出當前td中的文本內容保存起來 var text = td.text(); //2.清空td中的文本內容 //第一種 td.html(""); //第二種 //td.empty(); //3.建立一個文本框 也就是input的元素節點 (沒有尖括號時候是找,有尖括號時是創建) var input = $("<input>"); //4.設置文本框的值是保存起來的文本內容 input.attr("value", text); //4.5 讓文本框能夠響應鍵盤按下的事件 input.blur(function(event) { var cfm = confirm("是否確認修改"); if(cfm){ //0 獲取當前用戶點擊空白處時 //解決不同的瀏覽器獲取時間的對象的差異 //var myEvent = event || window.event; //var kcode = myEvent.keyCode; //1 判斷是否是回車按下 //if (kcode == 13) //{ //var inputnode = $(this); //2.獲取當前文本框的內容 //var inputtext = inputnode.val(); var inputtext = input.val(); //3.清空td里面的內容 //var tdNode = inputnode.parent(); var tdNode = input.parent(); //拿到td節點 //4.將保存的文本框的內容填充到td中 tdNode.html(inputtext); //5.讓td重新擁有點擊事件 tdNode.click(tdclick); //} } }); // input.keyup(function(event) { // //0 獲取當前用戶按下的鍵值 // //解決不同的瀏覽器獲取時間的對象的差異 // var myEvent = event || window.event; // var kcode = myEvent.keyCode; // //1 判斷是否是回車按下 // if (kcode == 13) // { // //var inputnode = $(this); // // //2.獲取當前文本框的內容 // //var inputtext = inputnode.val(); // var inputtext = input.val(); // //3.清空td里面的內容 // //var tdNode = inputnode.parent(); // var tdNode = input.parent(); //拿到td節點 // //4.將保存的文本框的內容填充到td中 // tdNode.html(inputtext); // //5.讓td重新擁有點擊事件 // tdNode.click(tdclick); // } // // }); //5.把文本框加到td中去 td.append(input);//也可以用input.appendTo(td); //5.5讓文本狂中的文字被高亮選中 //需要將jquery的對象轉換為dom對象 var inputdom = input.get(0); inputdom.select(); //6.清除td上注冊的點擊事件 td.unbind("click"); }
為了好看，css
table,td{ border-collapse:collapse;/*讓相鄰的邊框合並*/ border:1px solid black;/*邊框1個像素*/ }
大家可以試試！