基于JQuery制作可编辑的表格特效


Posted in Javascript onDecember 23, 2014

最近做了个项目,其中项目要求:点击表格后可直接编辑,回车或鼠标点击页面其他地方后编辑生效,按Esc可取消编辑

2个小伙伴给出了2中解决方案,大家来看看哪种更合适呢?

第一种单击表格可以编辑的方法

//相当于在页面中的 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");

}

想比较来说,个人更喜欢第二种一些,小伙伴们是什么意见呢,欢迎留言给我。

Javascript 相关文章推荐
JS字符串截取函数实例
Dec 27 Javascript
js如何调用qq互联api实现第三方登录
Mar 28 Javascript
js阻止事件追加的具体实现
Oct 15 Javascript
jquery转盘抽奖功能实现
Nov 13 Javascript
浅谈toLowerCase和toLocaleLowerCase的区别
Aug 15 Javascript
微信小程序加载更多 点击查看更多
Nov 29 Javascript
微信小程序图片横向左右滑动案例
May 19 Javascript
angularJS1 url中携带参数的获取方法
Oct 09 Javascript
jQuery分组选择器简单用法示例
Apr 04 jQuery
详解Vue.js和layui日期控件冲突问题解决办法
Jul 25 Javascript
jquery实现垂直手风琴菜单
Mar 04 jQuery
vue组件开发之slider组件使用详解
Aug 21 Javascript
JavaScript调试工具汇总
Dec 23 #Javascript
jQuery制作简洁的多级联动Select下拉框
Dec 23 #Javascript
jQuery元素选择器用法实例
Dec 23 #Javascript
jquery制作漂亮的弹出层提示消息特效
Dec 23 #Javascript
使用jQuery仿苹果官网焦点图特效
Dec 23 #Javascript
jQuery分组选择器用法实例
Dec 23 #Javascript
常用的JS验证和函数汇总
Dec 23 #Javascript
You might like
自定义PHP分页函数
2006/10/09 PHP
PHP可逆加密/解密函数分享
2012/09/25 PHP
PHP的构造方法,析构方法和this关键字详细介绍
2013/10/22 PHP
PHP GD库生成图像的几个函数总结
2014/11/19 PHP
php实现根据词频生成tag云的方法
2015/04/17 PHP
[推荐]javascript 面向对象技术基础教程
2009/03/03 Javascript
父节点获取子节点的字符串示例代码
2014/02/26 Javascript
js简单实现点击左右运动的方法
2015/04/10 Javascript
浅析四种常见的Javascript声明循环变量的书写方式
2015/10/14 Javascript
阿里巴巴技术文章分享 Javascript继承机制的实现
2016/01/14 Javascript
JavaScript中的this机制
2016/01/30 Javascript
vue轮播图插件vue-concise-slider的使用
2018/03/13 Javascript
又拍云 Node.js 实现文件上传、删除功能
2018/10/28 Javascript
vue跳转方式(打开新页面)及传参操作示例
2020/01/26 Javascript
vue v-for出来的列表,点击某个li使得当前被点击的li字体变红操作
2020/07/17 Javascript
浅谈python中scipy.misc.logsumexp函数的运用场景
2016/06/23 Python
python  Django中的apps.py的目的是什么
2018/10/15 Python
Python判断对象是否为文件对象(file object)的三种方法示例
2019/04/26 Python
对于Python深浅拷贝的理解
2019/07/29 Python
pytorch 利用lstm做mnist手写数字识别分类的实例
2020/01/10 Python
Python 解决相对路径问题:&quot;No such file or directory&quot;
2020/06/05 Python
pycharm中选中一个单词替换所有重复单词的实现方法
2020/11/17 Python
微软俄罗斯官方网站:Microsoft俄罗斯
2016/09/18 全球购物
LVMH旗下最大的奢侈品网站平台:24S
2020/05/24 全球购物
机械工程师求职自我评价
2013/09/23 职场文书
小学教师的自我评价范例
2013/10/31 职场文书
学校办公室主任职责
2013/12/27 职场文书
十佳护士获奖感言
2014/02/18 职场文书
2014年效能监察工作总结
2014/11/21 职场文书
免职通知
2015/04/23 职场文书
2015年会计工作总结范文
2015/05/26 职场文书
风之谷观后感
2015/06/11 职场文书
2016庆祝教师节新闻稿
2015/11/25 职场文书
python使用opencv对图像添加噪声(高斯/椒盐/泊松/斑点)
2022/04/06 Python
SQL Server #{}可以防止SQL注入
2022/05/11 SQL Server
springboot读取resources下文件的方式详解
2022/06/21 Java/Android