实现效果：　　

　　　　

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. [ZJOI2005]九数码游戏

    [ZJOI2005]九数码游戏 题目描述 输入输出格式 输入格式: 输入文件中包含三行三列九个数,同行的相邻两数用空格隔开,表示初始状态每个方格上的数字.初始状态不会是目标状态. 输出格式: 如果目标 ...

  2. 【node】使用nvm管理node版本

    写在前面 nvm(nodejs version manager)是nodejs的管理工具,如果你想快速更新node版本,并且不覆盖之前的版本:或者想要在不同的node版本之间进行切换: 使用nvm来安 ...

  3. win10 UWP 圆形等待

    看到一个圆形好像微软ProgressRing 我们可以用自定义控件 按ctrl+shift+a 用户控件 我们可以用Rectangle做圆形边 只要Rectangle RadiusX>0圆角 因 ...

  4. git 合并两个仓库

    我有两个仓库,一个是gitbook在写一本 一个是放在github的垃圾,这个是我想要开个人网站,但是做的还是不行https://github.com/lindexi/lindexi.github.i ...

  5. JavaFX引入资源问题

    描述 - 使用javafx 引入资源的时候 抛出异常 在swing引入资源 采取相对路径即可,而javafx不是 ImageView imageNode = (ImageView) root.look ...

  6. 【ASP.NET MVC 学习笔记】- 06 在MVC中使用Ninject

    本文参考:http://www.cnblogs.com/willick/p/3299077.html 1.在ASP.NET MVC中一个客户端请求是在特定的Controller的Action中处理的. ...

  7. MySql数据库的基本原理及指令

    1.什么是数据库 数据库就是存储数据的仓库,其本质是一个文件系统,数据按照特定的格式将数据存储起来,用户可以通过SQL对数据库中的数据进行增加,修改,删除及查询操作. 2.简介 MySQL是一个开放源 ...

  8. Swift 之Protocol在cocoa中的使用范例搜集(一)

    protocol Reusable: class { static var reuseIndentifier: String {get} static var nib: UINib? {get} } ...

  9. Java基础笔记7

    OOP面向对象有三个特点 1.封装 封装的好处: 起到一定的保护作用  封装的是属性. java如何进行封装; 1.使用private关键字对象属性封装. 只能在本类中使用.  2.为每个属性提供方法 ...

  10. HDU 4118 Holiday's Accommodation(树形DP)

    Holiday's Accommodation Time Limit: 8000/4000 MS (Java/Others)    Memory Limit: 200000/200000 K (Jav ...