最近做了個項目，其中項目要求：點擊表格後可直接編輯，回車或鼠標點擊頁面其他地方後編輯生效，按Esc可取消編輯
2個小伙伴給出了2中解決方案，大家來看看哪種更合適呢？
第一種單擊表格可以編輯的方法
代碼如下:
//相當於在頁面中的 body標簽加上onload事件
$(function() {
//找到所有的td節點
var tds = $("td");
//給所有的td添加點擊事件
tds.click(function() {
//獲得當前點擊的對象
var td = $(this);
//取出當前td的文本內容保存起來
var oldText = td.text();
//建立一個文本框，設置文本框的值為保存的值
var input = $("<input type='text' value='" + oldText + "'/>");
//將當前td對象內容設置為input
td.html(input);
//設置文本框的點擊事件失效
input.click(function() {
return false;
});
//設置文本框的樣式
input.css("border-width", "0");
input.css("font-size", "16px");
input.css("text-align", "center");
//設置文本框寬度等於td的寬度
input.width(td.width());
//當文本框得到焦點時觸發全選事件
input.trigger("focus").trigger("select");
//當文本框失去焦點時重新變為文本
input.blur(function() {
var input_blur = $(this);
//保存當前文本框的內容
var newText = input_blur.val();
td.html(newText);
});
//響應鍵盤事件
input.keyup(function(event) {
// 獲取鍵值
var keyEvent = event || window.event;
var key = keyEvent.keyCode;
//獲得當前對象
var input_blur = $(this);
switch (key)
{
case 13://按下回車鍵，保存當前文本框的內容
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");
//輸入框失去焦點，所執行的方法
input.blur(function(){
tdnode.html($(this).val());
tdnode.click(tdClick);
});
tdnode.unbind("click");
}
想比較來說，個人更喜歡第二種一些，小伙伴們是什麼意見呢，歡迎留言給我。