点击表格后可直接编辑,回车或鼠标点击页面其他地方后编辑生效,按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;

  1. 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");
}

JQuery实现可编辑的表格的更多相关文章

  1. 实战Jquery(二)--能够编辑的表格

    今天实现的是一个表格的样例,通过获取表格的奇数行,设置背景色属性,使得奇偶行背景色不同.这个表格能够在单击时编辑,回车即更改为新输入的内容;ESC还原最初的文本.表格的实现思路非常清晰,仅仅是在实现的 ...

  2. JQuery实战--可以编辑的表格

    廊坊下雪了,15年的第二场雪,比14的来的稍晚一些,停靠在11教门前的自行车,成了廊坊师范学院最美丽的风景线.还记得以前学习css的时候,就曾经接触过如何编写设计一些表格和表单的样式,例如如何设计表格 ...

  3. JQuery实战--能够编辑的表格

    廊坊下雪了.15年的第二场雪.比14的来的稍晚一些.停靠在11教门前的自行车.成了廊坊师范学院最漂亮的风景线.还记得以前学习css的时候.就以前接触过怎样编写设计一些表格和表单的样式,比如怎样设计表格 ...

  4. jQuery——能够编辑的表格

    版权声明:欢迎转载,请注明出处 https://blog.csdn.net/suneqing/article/details/26856635     今天学习了利用jQuery实现能够编辑的表格这个 ...

  5. JQuery经典小例子——可编辑的表格

    可编辑的表格: 屏幕剪辑的捕获时间: 2015/8/14 9:16 HTML代码为: <!DOCTYPE html> <htmlxmlns="http://www.w3.o ...

  6. jQuery实现可编辑表格

    在很多的网页中,这个可编辑表格在许多地方都是非常有用,配合上AJAX技术能够实现很好的用户体验,下面我 们就jQuery来说明一下可编辑表格的实现步骤 首先是HTML代码,非常简单 <!DOCT ...

  7. 可编辑的表格:jQuery+PHP实现实时编辑表格字段内容

    在本例中,我们会通过jQuery实现单击将一个文本信息变为可编辑的表单,你可以对文本内容进行编辑,然后点击“确定”按钮,新的内容将发送到后台PHP程序处理,并保存到数据库:当点击“取消”按钮,则页面恢 ...

  8. JQuery实战总结一 可编辑的表格

    JQuery视频看完了,总结学习,记得在牛腩视频中的修改新闻类别的时候也使用了这样的可编辑的表格,使用到 了ajax控制界面不再刷新,轻松解决了类别的名称的修改的问题,直接提交到数据库,这样的方式比起 ...

  9. [Web 前端] Jquery实现可直接编辑的表格

    cp from :https://www.cnblogs.com/sjqq/p/6392001.html?utm_source=itdadao&utm_medium=referral 文实例讲 ...

随机推荐

  1. HDU5320 : Fan Li

    考虑枚举左端点i,则随着右端点的右移,一共只有$O(\log n)$种不同的gcd取值.所以首先通过ST表+二分查找预处理出$O(n\log n)$个四元组(x,i,l,r),表示左端点为i,右端点取 ...

  2. hdu 5753 Permutation Bo 水题

    Permutation Bo 题目连接: http://acm.hdu.edu.cn/showproblem.php?pid=5753 Description There are two sequen ...

  3. MSDN WinUSB Example

    The WinUSB user-mode library uses device interface classes to communicate with the kernel-mode USB s ...

  4. SQLCE使用

    Windows Phone的本地数据库SQL Server CE是7.1版本即芒果更新的新特性,所以你要在应用程序中使用SQL Server CE数据库必须使用Windows Phone 7.1的AP ...

  5. JSTL标签用法:<c:choose><c:forEach><c:if><c:when><c:set>

    JSP 标准标记库( Standard Tag Library , JSTL) 是一组以标准化格式实现许多通用的 Web 站点功能的定制标记. JSP 技术的优势之一在于其定制标记库工具.除了核心 J ...

  6. Git:常用命令(二)

    查看提交历史 git log 撤消操作 任何时候,你都有可能需要撤消刚才所做的某些操作.接下来,我们会介绍一些基本的撤消操作相关的命令.请注意,有些操作并不总是可以撤消的,所以请务必谨慎小心,一旦失误 ...

  7. MySQL中进行树状所有子节点的查询 . mysql根据父id 查询所有的子id

    在Oracle 中我们知道有一个 Hierarchical Queries 通过CONNECT BY 我们可以方便的查了所有当前节点下的所有子节点.但很遗憾,在MySQL的目前版本中还没有对应的功能. ...

  8. 用开源项目cropper实现对图片中任意部分进行裁剪

     红色区域为截图控件的区域.    开源项目地址:https://github.com/edmodo/cropper croper这个开源项目可以对一个图片进行任意区域的街区,并且可以设置图片的旋转角 ...

  9. 从源码角度一步一步来修改PreferenceActivity界面

         PreferenceActivity给我们封装好了一个数据存储对象,我们只需要在xml文件中写上控件即可完成简单的设置界面.但是系统提供的设置界面十分的简陋,要想做的好看必须要自己来进行修改 ...

  10. html效果增强

    1:提示框 http://keleyi.com/keleyi/phtml/jqplug/ 2:loading效果 <script>function showPage(){    $('#d ...