博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JQuery实现可编辑的表格
阅读量:4971 次
发布时间:2019-06-12

本文共 2559 字,大约阅读时间需要 8 分钟。

点击表格后可直接编辑,回车或鼠标点击页面其他地方后编辑生效,按Esc可取消编辑 第一种单击表格可以编辑的方法//相当于在页面中的 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 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.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

转载于:https://www.cnblogs.com/ranzige/p/3909247.html

你可能感兴趣的文章
selerium配置环境:安装Chromedriver
查看>>
格言?
查看>>
linux ssh_config和sshd_config配置文件
查看>>
【夯实PHP基础】PHP 面向对象
查看>>
在shell script中进行数值运算的两种方法
查看>>
Web - LNMP
查看>>
DevOps - 版本控制 - Git
查看>>
多应用单账户登录体系梳理
查看>>
Web开发者应知的URL编码知识
查看>>
Android 调用相册 拍照 实现系统控件缩放 切割图片
查看>>
图解教你如何使用ANT打包java程序
查看>>
java游戏开发指导
查看>>
SQL 事物
查看>>
双端队列
查看>>
【LOJ】 #2013. 「SCOI2016」幸运数字
查看>>
折腾mysql的小坑记录
查看>>
树莓派入门
查看>>
tyvj1004 滑雪
查看>>
URAL 1143 Electric Path(带方向的区间DP + 记忆化搜索)
查看>>
HDOJ 3033 I love sneakers!(分组背包变型)
查看>>