首页 > 代码库 > JQuery实现可编辑的表格

JQuery实现可编辑的表格

点击表格后可直接编辑,回车或鼠标点击页面其他地方后编辑生效,按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=http://www.mamicode.com/‘" + 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