JQuery實(shí)現(xiàn)可直接編輯的表格

    功能：
    創(chuàng)建一個(gè)表格，用戶單擊某個(gè)單元格后，可以直接修改單元格文本。
    在編輯狀態(tài)下，用戶可按回車鍵確認(rèn)修改，按ESC鍵撤銷修改。
    效果如下圖：
    JQuery實(shí)現(xiàn)可直接編輯的表格 三聯(lián)
    思路：
    當(dāng)用戶點(diǎn)擊某個(gè)單元格后，立即向該單元格內(nèi)插入一個(gè)文本框，將它的寬、高都設(shè)置成與單元格相的數(shù)值。用戶確認(rèn)輸入后，清空該單元格內(nèi)的所有HTML代碼，然后把內(nèi)容設(shè)置為用戶剛剛輸入的文本。
    HTML代碼：
    <table>
    <tr>
    <td>學(xué)號(hào)</td>
    <td>姓名</td>
    </tr>
    <tr>
    <td>001</td>
    <td>dog</td>
    </tr>
    <tr>
    <td>002</td>
    <td>cat</td>
    </tr>
    <tr>
    <td>003</td>
    <td>pig</td>
    </tr>
    </table>
    JavaScript代碼:
    $(function(){
    $("td").click(function(event){
    //td中已經(jīng)有了input,則不需要響應(yīng)點(diǎn)擊事件
    if($(this).children("input").length > 0)
    return false;
    var tdObj = $(this);
    var preText = tdObj.html();
    //得到當(dāng)前文本內(nèi)容
    var inputObj = $("<input type='text' />");
    //創(chuàng)建一個(gè)文本框元素
    tdObj.html(""); //清空td中的所有元素
    inputObj
    .width(tdObj.width())
    //設(shè)置文本框?qū)挾扰ctd相同
    .height(tdObj.height())
    .css({border:"0px",fontSize:"17px",font:"宋體"})
    .val(preText)
    .appendTo(tdObj)
    //把創(chuàng)建的文本框插入到tdObj子節(jié)點(diǎn)的最后
    .trigger("focus")
    //用trigger方法觸發(fā)事件
    .trigger("select");
    inputObj.keyup(function(event){
    if(13 == event.which)
    //用戶按下回車
    {
    var text = $(this).val();
    tdObj.html(text);
    }
    else if(27 == event.which)
    //ESC鍵
    {
    tdObj.html(preText);
    }
    });
    //已進(jìn)入編輯狀態(tài)后，不再處理click事件
    inputObj.click(function(){
    return false;
    });
    });
    });