实现效果：　　

　　　　

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. 创建静态库Static Library(Framework库原理相似)

    在项目开发的过程中,经常使用静态库文件.例如两个公司之间业务交流,不可能把源代码都发送给另一个公司,这时候将私密内容打包成静态库,别人只能调用接口,而不能知道其中实现的细节. 简介: 库是一些没有ma ...

  2. PHP 注释 数据类型 变量的定义/输出 类型的获取/转换 可变变量

    注释方法: 1,单行注释:     // 2,  多行注释:     /*   */ 二,数据类型 1,integer(整数型):在三十二位操作系统中它的有效范围是:-2147483648~+2147 ...

  3. 搭建阿里云 centos mysql tomcat jdk

    [toc] 阿里云使用centos 登录 http://www.aliyun.com/ 点击登录 进入控制 https://home.console.aliyun.com/ 云服务器 运行中 把ip输 ...

  4. Python C++扩展

    Python C++扩展 前段时间看了一篇文章,http://blog.jobbole.com/78859/, 颇有感触,于是就结合自己工作中的知识作了一个简单的Python移动侦测:移动侦测的算法使 ...

  5. （转）Java Socket编程

    原文出自:http://www.cnblogs.com/rocomp/p/4790340.html Socket是网络驱动层提供给应用程序编程接口和一种机制.可以把Socket比喻成一个港口码头,应用 ...

  6. 新建JSPWeb应用

    首先,在eclipse Java EE里新建项目,选择Dynamic Web Project 目录如图所示,在WebContent里建立新文件JSP File. 先在body标签里写入hello wo ...

  7. 在CUDA8.0下编译安装OpenCV3.1.0来实现GPU加速(Compiling OpenCV3.1.0 with CUDA8.0 support)

    在CUDA8.0下编译安装OpenCV3.1.0 一.本人电脑配置:ubuntu 14.04, NVIDIA GTX1060. 二.编译OpenCV3.1.0前,读者需要成功安装CUDA8.0(网上有 ...

  8. 为什么国外的 App 很少会有开屏广告？

    前言: 笔者在知乎看到这个问题,觉得这的确是一个值得关注和回答的现象,遂写了回答并整理成本文发布在此抛砖引玉,欢迎讨论. 正文: 古话说得好,先问是不是,再问为什么. 对于「国外的 App 很少有开屏 ...

  9. 如何通过写bat 安装Windows服务，本人亲测成功

    1. 安装的bat文件 @echo on color 2f mode con: cols=80 lines=25 @echo 请按任意键开始安装后台服务... pause cd /d %~dp0 Le ...

  10. 容器与Docker简介（二）什么是DOCKER——微软微服务电子书翻译系列

    Docker是一个开源项目,用于将应用程序部署自动化,作为可在云端或本地运行的可移植,自包含的容器. Docker同时也是一家促进和发展这项技术的公司,与云,Linux以及Windows的供应商(包括 ...