基于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 相关文章推荐
javascript获取当前ip的代码
May 10 Javascript
jquery的extend和fn.extend的使用说明
Jan 09 Javascript
jQuery插件datalist实现很好看的input下拉列表
Jul 14 Javascript
Bootstrap每天必学之进度条
Nov 30 Javascript
你有必要知道的25个JavaScript面试题
Dec 29 Javascript
AngularJS directive返回对象属性详解
Mar 28 Javascript
JavaScript 闭包详细介绍
Sep 28 Javascript
jQuery Mobile和HTML5开发App推广注册页
Nov 07 Javascript
JS去掉字符串前后空格、阻止表单提交的实现代码
Jun 08 Javascript
鼠标拖动改变DIV等网页元素的大小的实现方法
Jul 06 Javascript
JS学习笔记之数组去重实现方法小结
May 29 Javascript
vue二选一tab栏切换新做法实现
Jan 19 Vue.js
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数据结构 算法(PHP描述) 简单选择排序 simple selection sort
2011/08/09 PHP
PHP用FTP类上传文件视频等的简单实现方法
2016/09/23 PHP
laravel框架使用FormRequest进行表单验证,验证异常返回JSON操作示例
2020/02/18 PHP
window.location.hash 属性使用说明
2010/03/20 Javascript
js网页侧边随页面滚动广告效果实现
2011/04/14 Javascript
将HTML的左右尖括号等转义成实体形式的两种实现方式
2014/05/04 Javascript
checkbox勾选判断代码分析
2014/06/11 Javascript
js实现div层缓慢收缩与展开的方法
2015/05/11 Javascript
JS获取字符串实际长度(包含汉字)的简单方法
2016/08/11 Javascript
Vue自定义指令介绍(2)
2016/12/08 Javascript
JavaScript30 一个月纯 JS 挑战中文指南(英文全集)
2017/07/23 Javascript
vue2.0项目中使用Ueditor富文本编辑器示例代码
2017/08/14 Javascript
详解开发react应用最好用的脚手架 create-react-app
2018/04/24 Javascript
vue非父子组件通信问题及解决方法
2018/06/11 Javascript
JS实现全屏预览F11功能的示例代码
2018/07/23 Javascript
vue在自定义组件中使用v-model进行数据绑定的方法
2019/03/25 Javascript
javascript设计模式 ? 迭代器模式原理与用法实例分析
2020/04/17 Javascript
nestjs中异常过滤器Exceptionfilter的具体使用
2021/02/07 Javascript
python不带重复的全排列代码
2013/08/13 Python
python获取android设备的GPS信息脚本分享
2015/03/06 Python
用map函数来完成Python并行任务的简单示例
2015/04/02 Python
介绍Python的Urllib库的一些高级用法
2015/04/30 Python
python爬虫入门教程--利用requests构建知乎API(三)
2017/05/25 Python
python负载均衡的简单实现方法
2018/02/04 Python
Python 二叉树的层序建立与三种遍历实现详解
2019/07/29 Python
Django用户认证系统 User对象解析
2019/08/02 Python
django自带的权限管理Permission用法说明
2020/05/13 Python
如何找出EMP表里面SALARY第N高的employee
2013/12/05 面试题
中科前程Java笔试题
2016/11/20 面试题
售前工程师职业生涯规划
2014/03/02 职场文书
餐饮商业计划书范文
2014/04/29 职场文书
党员学习新党章思想汇报
2014/10/25 职场文书
邀请函样本
2015/02/02 职场文书
大学生学期个人总结
2015/02/12 职场文书
2015初中生物教研组工作总结
2015/07/21 职场文书
SpringBoot读取Resource下文件的4种方法
2021/07/02 Java/Android