最近做了個(gè)項(xiàng)目，其中項(xiàng)目要求：點(diǎn)擊表格后可直接編輯，回車或鼠標(biāo)點(diǎn)擊頁(yè)面其他地方后編輯生效，按Esc可取消編輯
2個(gè)小伙伴給出了2中解決方案，大家來看看哪種更合適呢？
第一種單擊表格可以編輯的方法
代碼如下:
//相當(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)容保存起來
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;
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è)人更喜歡第二種一些，小伙伴們是什么意見呢，歡迎留言給我。