//相當(dāng)于在頁面中的 body標(biāo)簽加上onload事件
$(function() {
    //找到所有的td節(jié)點(diǎn)
    var tds = $("td");
    //給所有的td添加點(diǎn)擊事件
    tds.click(function() {
        //獲得當(dāng)前點(diǎn)擊的對象
        var td = $(this);
        //取出當(dāng)前td的文本內(nèi)容保存起來
        var oldText = td.text();
        //建立一個(gè)文本框，設(shè)置文本框的值為保存的值
        var input = $("<input type='text' value='" + oldText + "'/>");
        //將當(dāng)前td對象內(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)前對象
            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");
}