基於JQuery製作可編輯的表格特效_jquery

最近做了個項目，其中項目要求：點擊表格後可直接編輯，回車或滑鼠點擊頁面其他地方後編輯生效，按Esc可取消編輯

2個小夥伴給了2中解決方案，大家來看看哪種比較適合呢？

第一種點選表格可以編輯的方法

複製程式碼 程式碼如下:

//相當於頁面中的 body標籤加上onload事件
$(function() {
    //找到所有的td節點
    var tds = $("td");
    //為所有的td新增點擊事件
    tds.click(function() {
        //取得目前點選的物件
        var td = $(this);
        //取出目前td的文字內容儲存起來
        var oldText = td.text();
        //建立一個文字框，並設定文字方塊的值為已儲存的值
        var input = $("");
        //將目前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 新Text = input_blur.val();
                    td.html(newText);
                    break;
                case 27://按下 esc鍵，且取消修改，且將文字方塊變成文字
                    td.html(oldText);
                    break;
            }
        });
    });
});

第二種點選表格可以編輯的方法

複製程式碼 程式碼如下:

$(文檔).ready(function(){
    var tds = $("td");
    tds.click(tdClick);
});
函數 tdClick(){
    var tdnode = $(this);
    var tdtext = tdnode.text();
    tdnode.html("");
    var input = $("");
    輸入.val(tdtext); //    input.attr("value",tdtext);
    input.keyup(函數(事件){
        var myEvent = 事件 || window.event;
        var keyCode = myEvent.keyCode;
        if(keyCode == 13){
            var inputnode = $(this);
            var inputtext = inputnode.val();
            var td = inputnode.parent();
            td.html(輸入文字);
            td.click(tdClick);
        }
        if(keyCode == 27){  //判斷是否按下ESC鍵
            $(this).parent().html(tdtext);
            $(this).parent().click(tdClick);
        }
    });
    tdnode.append(輸入);
    tdnode.children("input").trigger("select");
    //輸入框失去焦點，執行的方法
    input.blur(function(){
        tdnode.html($(this).val());
        tdnode.click(tdClick);
    });
    tdnode.unbind("點選");
}

想比較來說，個人比較喜歡另外一些，小夥伴們有什麼意見呢，歡迎留言給我。