最近做了個(gè)項(xiàng)目，其中項(xiàng)目要求：點(diǎn)擊表格后可直接編輯，回車或鼠標(biāo)點(diǎn)擊頁面其他地方后編輯生效，按Esc可取消編輯

2個(gè)小伙伴給出了2中解決方案，大家來看看哪種更合適呢？

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

代碼如下:

//相當(dāng)于在頁面中的 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)容保存起來

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)槲谋?/P>

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;

case 27://按下 esc鍵，取消修改，把文本框變成文本

td.html(oldText);

break;

}

});

});

});

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

代碼如下:

$(document).ready(function(){

var tds = $("td");

tds.click(tdClick);

});

function tdClick(){

var tdnode = $(this);

var tdtext = tdnode.text();

tdnode.html("");

var input = $("<input>");

input.val(tdtext); // input.attr("value",tdtext);

input.keyup(function(event){

var myEvent = event || window.event;

var keyCode = myEvent.keyCode;

if(keyCode == 13){

var inputnode = $(this);

var inputtext = inputnode.val();

var td = inputnode.parent();

td.html(inputtext);

td.click(tdClick);

}

if(keyCode == 27){ //判斷是否按下ESC鍵

$(this).parent().html(tdtext);

$(this).parent().click(tdClick);

}

});

tdnode.append(input);

tdnode.children("input").trigger("select");

//輸入框失去焦點(diǎn)，所執(zhí)行的方法

input.blur(function(){

tdnode.html($(this).val());

tdnode.click(tdClick);

});

tdnode.unbind("click");

}

想比較來說，個(gè)人更喜歡第二種一些，小伙伴們是什么意見呢，歡迎留言給我。

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