热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

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

这篇文章主要介绍了基于JQuery制作可编辑的表格特效,一共给出了2种解决方案,小伙伴们能看出来哪种方案更合理吗?

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

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

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

代码如下:

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

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


推荐阅读
  • 深入理解OAuth认证机制
    本文介绍了OAuth认证协议的核心概念及其工作原理。OAuth是一种开放标准,旨在为第三方应用提供安全的用户资源访问授权,同时确保用户的账户信息(如用户名和密码)不会暴露给第三方。 ... [详细]
  • 2023 ARM嵌入式系统全国技术巡讲旨在分享ARM公司在半导体知识产权(IP)领域的最新进展。作为全球领先的IP提供商,ARM在嵌入式处理器市场占据主导地位,其产品广泛应用于90%以上的嵌入式设备中。此次巡讲将邀请来自ARM、飞思卡尔以及华清远见教育集团的行业专家,共同探讨当前嵌入式系统的前沿技术和应用。 ... [详细]
  • 本文介绍了如何使用jQuery根据元素的类型(如复选框)和标签名(如段落)来获取DOM对象。这有助于更高效地操作网页中的特定元素。 ... [详细]
  • 导航栏样式练习:项目实例解析
    本文详细介绍了如何创建一个具有动态效果的导航栏,包括HTML、CSS和JavaScript代码的实现,并附有详细的说明和效果图。 ... [详细]
  • 1:有如下一段程序:packagea.b.c;publicclassTest{privatestaticinti0;publicintgetNext(){return ... [详细]
  • 深入理解Tornado模板系统
    本文详细介绍了Tornado框架中模板系统的使用方法。Tornado自带的轻量级、高效且灵活的模板语言位于tornado.template模块,支持嵌入Python代码片段,帮助开发者快速构建动态网页。 ... [详细]
  • 深入理解Cookie与Session会话管理
    本文详细介绍了如何通过HTTP响应和请求处理浏览器的Cookie信息,以及如何创建、设置和管理Cookie。同时探讨了会话跟踪技术中的Session机制,解释其原理及应用场景。 ... [详细]
  • 本文介绍如何在 Xcode 中使用快捷键和菜单命令对多行代码进行缩进,包括右缩进和左缩进的具体操作方法。 ... [详细]
  • 本文详细介绍了如何使用Python编写爬虫程序,从豆瓣电影Top250页面抓取电影信息。文章涵盖了从基础的网页请求到处理反爬虫机制,再到多页数据抓取的全过程,并提供了完整的代码示例。 ... [详细]
  • 本文介绍了一款用于自动化部署 Linux 服务的 Bash 脚本。该脚本不仅涵盖了基本的文件复制和目录创建,还处理了系统服务的配置和启动,确保在多种 Linux 发行版上都能顺利运行。 ... [详细]
  • 前言--页数多了以后需要指定到某一页(只做了功能,样式没有细调)html ... [详细]
  • 本文详细介绍了W3C标准盒模型和IE传统盒模型的区别,探讨了CSS3中box-sizing属性的使用方法及其在布局中的重要性。通过实例分析,帮助读者更好地理解和应用这一关键概念。 ... [详细]
  • 在Linux系统中配置并启动ActiveMQ
    本文详细介绍了如何在Linux环境中安装和配置ActiveMQ,包括端口开放及防火墙设置。通过本文,您可以掌握完整的ActiveMQ部署流程,确保其在网络环境中正常运行。 ... [详细]
  • 如何在WPS Office for Mac中调整Word文档的文字排列方向
    本文将详细介绍如何使用最新版WPS Office for Mac调整Word文档中的文字排列方向。通过这些步骤,用户可以轻松更改文本的水平或垂直排列方式,以满足不同的排版需求。 ... [详细]
  • 理解存储器的层次结构有助于程序员优化程序性能,通过合理安排数据在不同层级的存储位置,提升CPU的数据访问速度。本文详细探讨了静态随机访问存储器(SRAM)和动态随机访问存储器(DRAM)的工作原理及其应用场景,并介绍了存储器模块中的数据存取过程及局部性原理。 ... [详细]
author-avatar
当个里个当
这个世界很大 大到我们错过了彼此 这个世界很小 小到每个细节都充满奇妙
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有