基于JQuery制作可編輯的表格特效

更新時間：2014年12月23日 16:31:26 投稿：hebedich

這篇文章主要介紹了基于JQuery制作可編輯的表格特效，一共給出了2種解決方案，小伙伴們能看出來哪種方案更合理嗎？

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

2個小伙伴給出了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)擊的對象

        var td = $(this);

        //取出當(dāng)前td的文本內(nèi)容保存起來

        var oldText = td.text();

        //建立一個文本框，設(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)時觸發(fā)全選事件

        input.trigger("focus").trigger("select");

        //當(dāng)文本框失去焦點(diǎn)時重新變?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;

            }

        });

    });

});

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

復(fù)制代碼代碼如下:

$(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");

}