功能：

創(chuàng)建一個(gè)表格，用戶(hù)單擊某個(gè)單元格后，可以直接修改單元格文本。

在編輯狀態(tài)下，用戶(hù)可按回車(chē)鍵確認(rèn)修改，按ESC鍵撤銷(xiāo)修改。

效果如下圖：

JQuery實(shí)現(xiàn)可直接編輯的表格 三聯(lián)

思路：

當(dāng)用戶(hù)點(diǎn)擊某個(gè)單元格后，立即向該單元格內(nèi)插入一個(gè)文本框，將它的寬、高都設(shè)置成與單元格相的數(shù)值。用戶(hù)確認(rèn)輸入后，清空該單元格內(nèi)的所有HTML代碼，然后把內(nèi)容設(shè)置為用戶(hù)剛剛輸入的文本。

HTML代碼：

<table align="center">

<tr>

<td>學(xué)號(hào)</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中已經(jīng)有了input,則不需要響應(yīng)點(diǎn)擊事件

if($(this).children("input").length > 0)

return false;

var tdObj = $(this);

var preText = tdObj.html();

//得到當(dāng)前文本內(nèi)容

var inputObj = $("<input type='text' />");

//創(chuàng)建一個(gè)文本框元素

tdObj.html(""); //清空td中的所有元素

inputObj

.width(tdObj.width())

//設(shè)置文本框?qū)挾扰ctd相同

.height(tdObj.height())

.css({border:"0px",fontSize:"17px",font:"宋體"})

.val(preText)

.appendTo(tdObj)

//把創(chuàng)建的文本框插入到tdObj子節(jié)點(diǎn)的最后

.trigger("focus")

//用trigger方法觸發(fā)事件

.trigger("select");

inputObj.keyup(function(event){

if(13 == event.which)

//用戶(hù)按下回車(chē)

{

var text = $(this).val();

tdObj.html(text);

}

else if(27 == event.which)

//ESC鍵

{

tdObj.html(preText);

}

});

//已進(jìn)入編輯狀態(tài)后，不再處理click事件

inputObj.click(function(){

return false;

});

});

});

更多信息請(qǐng)查看IT技術(shù)專(zhuān)欄