點(diǎn)擊表格后可直接編輯，回車或鼠標(biāo)點(diǎn)擊頁(yè)面其他地方后編輯生效，按Esc可取消編輯

第一種單擊表格可以編輯的方法

//相當(dāng)于在頁(yè)面中的 body標(biāo)簽加上onload事件
$(function() {
??? //找到所有的td節(jié)點(diǎn)
??? var tds = $("td");
??? //給所有的td添加點(diǎn)擊事件
??? tds.click(function() {
??????? //獲得當(dāng)前點(diǎn)擊的對(duì)象
??????? var td = $(this);
??????? //取出當(dāng)前td的文本內(nèi)容保存起來(lái)
??????? var oldText = td.text();
??????? //建立一個(gè)文本框，設(shè)置文本框的值為保存的值
??????? var input = $("<input type='text' value='" + oldText + "'/>");
??????? //將當(dāng)前td對(duì)象內(nèi)容設(shè)置為input
??????? td.html(input);
??????? //設(shè)置文本框的點(diǎn)擊事件失效
??????? input.click(function() {
??????????? return false;
??????? });
??????? //設(shè)置文本框的樣式
??????? input.css("border-width", "0");
??????? input.css("font-size", "16px");
??????? input.css("text-align", "center");
??????? //設(shè)置文本框?qū)挾鹊扔趖d的寬度
??????? input.width(td.width());
??????? //當(dāng)文本框得到焦點(diǎn)時(shí)觸發(fā)全選事件
??????? input.trigger("focus").trigger("select");
??????? //當(dāng)文本框失去焦點(diǎn)時(shí)重新變?yōu)槲谋?br />??????? input.blur(function() {
??????????? var input_blur = $(this);
??????????? //保存當(dāng)前文本框的內(nèi)容
??????????? var newText = input_blur.val();
??????????? td.html(newText);
??????? });
??????? //響應(yīng)鍵盤事件
??????? input.keyup(function(event) {
??????????? // 獲取鍵值
??????????? var keyEvent = event || window.event;
??????????? var key = keyEvent.keyCode;
??????????? //獲得當(dāng)前對(duì)象
??????????? var input_blur = $(this);
??????????? switch (key)
??????????????????? {
??????????????? case 13://按下回車鍵，保存當(dāng)前文本框的內(nèi)容
??????????????????? var newText = input_blur.val();
??????????????????? td.html(newText);
??????????????????? break;

1. ??????????????? case 27://按下 esc鍵，取消修改，把文本框變成文本
   ??????????????????? td.html(oldText);
   ??????????????????? break;
   ??????????? }
   ??????? });
   ??? });
   });