JQuery實現可編輯的表格

標籤：style   blog   http   color   io   ar   cti   div   

點擊表格後可直接編輯，斷行符號或滑鼠點擊頁面其他地方後編輯生效，按Esc可取消編輯 第一種單擊表格可以編輯的方法//相當於在頁面中的 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");}

使用者體驗的一篇好文章：http://www.manong123.com/content/5844.html