实现效果：　　

　　　　

htm l代码：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>表格编辑器</title>

        <link rel="stylesheet" type="text/css" href="css/tableWrite.css"/>

        <script src="js/tableWrite.js" type="text/javascript" charset="utf-8"></script>

    </head>

    <body>

        <h1>表格编辑器</h1>

        <section>

            <table id="myTable">

                <tbody>

                    <tr>

                        <th>用户名</th>

                        <th>地址</th>

                        <th>电话</th>

                    </tr>

                    <tr>

                        <td>tom</td>

                        <td>济南</td>

                        <td>12232341</td>

                    </tr>

                    <tr>

                        <td>qqq</td>

                        <td>大时代</td>

                        <td>213231312</td>

                    </tr>

                </tbody>

            </table>

        </section>

    </body>

</html>

Css 代码：

*{

    font: 12px/25px 宋体;

 }

h1{

    font: 15px/25px 宋体;

  }

table,th,td{

    border-collapse: collapse;

    border: 1px solid #cccccc;

  }

JS  代码

function tableBlurOperator(event){
　　　　　　　　　　　　　　　//获取事件的值

                    let tdvalue = event.target.value;
　　　　　　　　　　　　　　　//给事件的父类标签赋值

                    event.target.parentElement.value=tdvalue;

                }

                function tableClickOperator(event){
　　　　　　　　　　　　　　//建立一个text输入框

                    let input = document.createElement("input");

                    input.type="text";
　　　　　　　　　　　　　　//输入框的初始值为原标签上的值

                    input.value=event.target.innerHTML;
　　　　　　　　　　　　　　//将原标签的值清空，防止出现两次

                    event.target.innerHTML="";
　　　　　　　　　　　　　　//将 text输入框加入到表格中

                    event.target.appendChild(input);
　　　　　　　　　　　　　　//在最后获得焦点

                    input.focus();
　　　　　　　　　　　　　　//失去焦点的事件

                    input.addEventListener("blur",tableBlurOperator,false);

                }

            function init(){
　　　　　　　　　　　　　　//点击事件

                document.getElementById("myTable").addEventListener("click",tableClickOperator,false);

            }

            window.addEventListener("load",init,false);

用JavaScript实现表格编辑器的更多相关文章

  1. 10个免费的javascript富文本编辑器（jQuery and non-jQuery）

    祝愿园子里的朋友圣诞节快乐. 本文介绍了10个免费易用富文本编辑器(rich text editors,RTE),其中5个是Jquery插件,另外5个是非Jquery富文本编辑器 简介 Javascr ...

  2. javascript 在线文本编辑器

    javascript 在线文本编辑器实现代码. 效果例如以下: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcGhwZmVuZ2h1bw==/font/5 ...

  3. JavaScript创建表格的两种方式

    方式一: var data = [ { id: 1, name: "first", age: 12 }, { id: 2, name: "second", ag ...

  4. JavaScript 实现文本编辑器

    JavaScript 实现文本编辑器 最近,我需要做一个非常基本的网页内容编辑功能.我不想使用 iframe ,我也不想要一个功能特别多的复杂编辑器,只需要很基本的内容编辑功能,例如粗体,斜体,列表, ...

  5. Javascript合并表格相同内容单元格示例

    效果图: HTML代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http: ...

  6. Javascript富文本编辑器

    分享几款Javascript富文本编辑器 ueditor jqframework xheditor htmlbox kindeditor wymeditor jhtmlarea markitup ck ...

  7. JavaScript 实现表格隔行变色

    JavaScript 实现表格隔行变色 版权声明:未经授权,严禁分享! 构建界面 界面HTML代码 <style> #data,th,td{ border: 1px solid #aaaa ...

  8. CodeMirror：基于JavaScript的代码编辑器

    官方网站定义: http://codemirror.net/ CodeMirror is a versatile text editor implemented in JavaScript for t ...

  9. javascript生成表格增删改查 JavaScript动态改变表格单元格内容 动态生成表格 JS获取表格任意单元格 javascript如何动态删除表格某一行

    jsp页面表格布局Html代码 <body onload="show()"> <center> <input type="text" ...

随机推荐

  1. riot.js教程【一】简介

    Riotjs简介 Riotjs是一款简单的.优雅的.组件化UI前端开发框架: 他支持自定义标签(custom tags),拥有令人愉悦的语法,优雅的API和非常小的体积: 为什么需要一个新的界面库 前 ...

  2. 知识树杂谈Java面试(4)

    一. Java集合 1.  集合分类:  Collection.Map. 2. Collection: 3. Map 4. 注意点 a. List 有序.可重复:Set 无序.不可重复:Map  键值 ...

  3. win10 sdk 是否向下兼容

    向下兼容(downward compatibility),又称向后兼容(backward compatibility).回溯兼容,在计算机中指在一个程序.库或硬件更新到较新版本后,用旧版本程序创建的文 ...

  4. spark-shell启动报错：Yarn application has already ended! It might have been killed or unable to launch application master

    spark-shell不支持yarn cluster,以yarn client方式启动 spark-shell --master=yarn --deploy-mode=client 启动日志,错误信息 ...

  5. System.getProperty参数大全

    System.getProperty()参数大全 #java.version                                    Java Runtime Environment v ...

  6. Azure 基础 : 使用 template 简化部署

    笔者在前文中介绍了如何使用 PowerShell 脚本在 Azure 上创建虚拟主机.正如你所看到的,整个创建过程还是有点繁琐的,因为我们需要使用 PowerShell 脚本创建并关联所有相关的组件. ...

  7. 使用SimpleXML解析xml文件数据

    最近工作要求从一个XML文档中批量读取APK应用数据,自然想到用SimpleXML.经过一段时间摸索,终于成功解析,现在将思路以及代码做下记录: xml文件格式大致如下: <?xml versi ...

  8. Windows环境下多线程编程原理与应用读书笔记（3）————Windows环境中的多线程实现（3）

    纤程 纤程(fiber): 相当于用户级别的线程或轻进程.纤程由Win32库函数支持,对核心是不可见的.纤程可以通过SwitchToFiber显示至另一合作纤程,以实现合作纤程之间的协同.线程是在Wi ...

  9. HDU 6143 Killer Names

    Killer Names Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Tota ...

  10. rsync远程数据同步工具的使用

    准备工作 虚拟机1: 192.168.24.41, 用于搭建rsync服务器 虚拟机2: 192.168.26.68, 用于搭建rsync客户端 虚拟机1和虚拟机2均为centos7; 1. 检查虚拟 ...