本文實例講述了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
;
});
});
});