功能实现：

（1）设定单元格的单击事件，判定被单击单元格是否已经是可编辑状态；

（2）取出单元格原有内容，想单元格中加入文本框，并把原有内容显示在文本框中；

（3）当用户编辑完成或者取消编辑后，将文本框的值取出，删除文本框，并将值在单元格中显示。

效果图：

 

完整代码：

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title></title>

    <script type="text/javascript" src="../js/jquery-3.2.1.min.js"></script>

    <style media="screen">

        table {

            border-collapse: collapse;

            border-color: rgba(205, 193, 222, 0.84);

        }

    </style>

</head>

<body>

    <table border="1">

        <thead>

            <tr>

                <th>

                    &nbsp;编号&nbsp;

                </th>

                <th>

                    &nbsp;语言&nbsp;

                </th>

                <th>

                    &nbsp;课时&nbsp;

                </th>

            </tr>

        </thead>

        <tbody>

            <tr>

                <td>c001</td>

                <td>c#</td>

                <td>80</td>

            </tr>

            <tr>

                <td>c002</td>

                <td>Java</td>

                <td>70</td>

            </tr>

            <tr>

                <td>c003</td>

                <td>PHP</td>

                <td>60</td>

            </tr>

            <tr>

                <td>c004</td>

                <td>Perl</td>

                <td>50</td>

            </tr>

        </tbody>

    </table>

   <script>

        $(document).ready(function() {

            $('tbody tr td').click(function(){            //单元格单击事件

                var alerttd = $(this);

                if (alerttd.children('input').length > 0) {        //判断单元格是否是编辑状态

                        return false;

                }

                var htmlcontent = alerttd.html();            //取出单元格原有内容

                alerttd.html("");                    //清空单元格内容

                var textbox = $("<input type='text' />").css("border-width","1").css("background-color","gray").width(alerttd.width()).val(htmlcontent).appendTo(alerttd);

                //将文本框加入单元格并显示原有内容

                textbox.trigger("focus").trigger("select");

                textbox.click(function(){

                    return false;

                });

                textbox.keyup(function(event){

                    var keycode = event.which;

                    if (keycode == 13) {        //用户单击回车键，刷新单元格内容

                        var inputtext = $(this).val();

                        alerttd.html(inputtext);

                    }

                    if (keycode == 27) {        //单击Esc键表示放弃编辑内容，显示原始单元格内容

                        alerttd.html(htmlcontent);

                    }

                });

            });

        });

    </script>

</body>

</html>

　

【Demo】jQuery 可编辑表格的更多相关文章

  1. jQuery一步一步实现跨浏览器的可编辑表格，支持IE、Firefox、Safari、

    脚 本 之 家 www.jb51.net 脚本云 专题 素材下载 电子书 软件下载 源码下载 服务器常用软件 a5交易 首页 网页制作 脚本专栏 脚本下载 网络编程 数据库 CMS教程 电子书籍 平面 ...

  2. jQuery实现可编辑表格

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

  3. jquery银行电子账单表格填入和编辑插件

    jquery银行电子账单表格填入和编辑 前段时间做的一个银行表格账单的jquery插件,用于金额写入和编辑的应用,希望对大家有所帮助,发现问题欢迎回复 ;(function($){ function ...

  4. Jqgrid入门-使用模态对话框编辑表格数据(三)

            Jqgrid是一个强大的表格插件,它提供了多种方式来编辑数据.这三种方式分别是: Cell Editing——只允许修改某一个单元格内容 Inline Editing——允许在jqGr ...

  5. easyui datagrid可编辑表格使用经验分享

    文章目录 1相关接口方法 2列属性formatter 3编辑器类型 3.1基于my97的编辑器 3.2简单的密码编辑器 3.3动态增加/删除编辑器 4字段的级联操作 4.1combobox的级联操作 ...

  6. [转]jquery 点击表格变为input可以修改无刷新更新数据

    原文地址:http://www.freejs.net/article_biaodan_43.html 之前已经发了2篇类似的文章<点击变td为input更新>和<jquery表格可编 ...

  7. LigerUI编辑表格组件单元格校验问题

    这几天在使用LigerUI(版本为1.2.2)编辑表格组件的时候,遇到几个小问题,从官方demo和api中没有找到解决的办法 问题1.从数据库查询出来的主键单元格不可编辑问题 主键单元格已经保存之前编 ...

  8. LigerUI可编辑表格左下角出现白色小方块遮罩层问题解决办法

    LigerUI已经研究了一段时间,总体感觉还不错,基于jQuery开发,框架提供了丰富的UI组件,尤其LigerUI表格,功能还是挺强大的 在使用LigerUI可编辑表格的时候,发现一个小小的问题 当 ...

  9. 老男孩Day17作业：后台管理平台编辑表格

    一.作业需求: 后台管理平台 ,编辑表格: 1. 非编辑模式: 可对每行进行选择: 反选: 取消选择 2. 编辑模式: 进入编辑模式时如果行被选中,则被选中的行万变为可编辑状态,未选中的不改变 退出编 ...

随机推荐

  1. Ajax 报错 500 (Internal Server Error)

    ==========error======={"readyState":4,"responseText":"<html><head& ...

  2. 端口状态说明 LISTENING、ESTABLISHED、TIME_WAIT及CLOSE_WAIT

    TCP状态转移要点    TCP协议规定,对于已经建立的连接,网络双方要进行四次握手才能成功断开连接,如果缺少了其中某个步骤,将会使连接处于假死状态,连接本身占用的资源不会被释放.网络服务器程序要同时 ...

  3. 从u-boot的编译结果中提取include目录

    ac@DESKTOP-BJ1MJGM:~/u-boot-2019.01/spl$ arm-linux-gnueabihf-objdump -g u-boot-spl | awk '/The Direc ...

  4. JSM 学习（一）

    JMS 支持两类消息传送模型:点对点模型和发布/订阅模型.又称这些消息传送模型为消息传送域.点对点模型和发布订阅模型分别缩写为p2p和Pub/Sub.发布订阅模型用于一对多消息广播,点对点模型用于一对 ...

  5. JVM内存结构 JVM的类加载机制

    JVM内存结构: 1.java虚拟机栈:存放的是对象的引用(指针)和局部变量 2.程序计数器:每个线程都有一个程序计数器,跟踪代码运行到哪个位置了 3.堆:对象.数组 4.方法区:字节流(字节码文件) ...

  6. $ 一步一步学Matlab（3）——Matlab中的数据类型

    小学时候我们就知道,数学中有自然数.整数.分数.小数等等很多种类型的数.到了中学,我们又发现了其实还有无理数.复数这些有些特殊的数.到了大学学了高等数学之后,我们又知道了其实还存在着无穷大.无穷小这样 ...

  7. centos上传下载文件

    1.在windows上安装SecureCRT 2.在centos上安装rzsz软件:yum install lrzsz 3.rz命令上传文件到centos 4.sz命令发送文件到windows

  8. Ubuntu16.04 中如何挂载第二块磁盘，挂载成功，但是用reboot和shutdown重启或关机后挂载就没有了的解决办法

    本测试机有4块硬盘,初始意图想做一个磁盘阵列,但是在安装系统的时候不知道引导文件如何选择安装,所以暂时不使用磁盘阵列(后期研究) 检测硬盘能否被识别 root@ranxf:/# fdisk -l Di ...

  9. Android系统init进程启动及init.rc全解析

    转:https://blog.csdn.net/zhonglunshun/article/details/78615980 服务启动机制system/core/init/init.c文件main函数中 ...

  10. 20145328 《Java程序设计》第1周学习总结

    20145328 <Java程序设计>第1周学习总结 教材学习内容总结 了解Java基础知识 1995年5月23日,Java诞生,JDK 1.0a2发布 Java约以两年为周期推出重大版本 ...