本文實例講述了JQuery實作可直接編輯的表格。分享給大家供大家參考。具體分析如下：
功能：
建立一個表格，使用者點選某個儲存格後，可以直接修改儲存格文字。
編輯狀態下，使用者可按下回車鍵確認修改，按ESC鍵撤銷修改。
效果如下圖：
思路：
當使用者點擊某個儲存格後，立即向該儲存格內插入一個文字框，將它的寬、高都設定成與儲存格相的數值。使用者確認輸入後，清空該儲存格內的所有HTML程式碼，然後把內容設定為使用者剛輸入的文字。
HTML程式碼：
<table align="center"> <tr> <td>学号</td> <td>姓名</td> </tr> <tr> <td>001</td> <td>dog</td> </tr> <tr> <td>002</td> <td>cat</td> </tr> <tr> <td>003</td> <td>pig</td> </tr> </table>
JavaScript程式碼:
$(function(){
$("td").click(function(event){
//td中已经有了input,则不需要响应点击事件
if($(this).children("input").length > 0)
return false;
var tdObj = $(this);
var preText = tdObj.html();
//得到当前文本内容
var inputObj = $("<input type='text' />");
//创建一个文本框元素
tdObj.html(""); //清空td中的所有元素
inputObj
.width(tdObj.width())
//设置文本框宽度与td相同
.height(tdObj.height())
.css({border:"0px",fontSize:"17px",font:"宋体"})
.val(preText)
.appendTo(tdObj)
//把创建的文本框插入到tdObj子节点的最后
.trigger("focus")
//用trigger方法触发事件
.trigger("select");
inputObj.keyup(function(event){
if(13 == event.which)
//用户按下回车
{
var text = $(this).val();
tdObj.html(text);
}
else if(27 == event.which)
//ESC键
{
tdObj.html(preText);
}
});
//已进入编辑状态后，不再处理click事件
inputObj.click(function(){
return false;
});
});
}); 希望本文所述對大家的jQuery程式設計有所幫助。
