实现效果：　　

　　　　

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. Hadoop（七）HDFS容错机制详解

    前言 HDFS(Hadoop Distributed File System)是一个分布式文件系统.它具有高容错性并提供了高吞吐量的数据访问,非常适合大规模数据集上的应用,它提供了一个高度容错性和高吞 ...

  2. STM32外部中断线编程

    #include "ExtiConfig.h" unsigned char key1Down = 0; unsigned char key2Down = 0; /********* ...

  3. MySQL自定义函数用法详解-复合结构自定义变量/流程控制

    自定义函数 (user-defined function UDF)就是用一个象ABS() 或 CONCAT()这样的固有(内建)函数一样作用的新函数去扩展MySQL. 所以UDF是对MySQL功能的一 ...

  4. PyCharm 2017 免费 破解 注册 激活 教程（附 License Server 地址）（Python 编辑器 IDE 推荐）

    许多朋友都在问如何破解 PyCharm 2017 Professional 专业版,咪博士对此是坚决反对的! 不到万不得已,请不要这样做.破解之前,请拖到文章末尾,思考几个问题,想明白你确实需要这样做 ...

  5. 上海2017QCon个人分享总结

    有幸作为讲师受邀参加InfoQ在上海举办的QCon2017,不得不说,不论是从讲师还是听众的角度衡量,QCon进一步扩大了技术视野.虽然前端专题只有四场,但每一场分享都是目前的热门话题.并且Qcon的 ...

  6. elasticsearch+kibana+metricbeat安装部署方法

    elasticsearch+kibana+metricbeat安装部署方法 本文是elasticsearch + kibana + metricbeat,没有涉及到logstash部分.通过beat收 ...

  7. Git相关操作二

    1.查看HEAD提交: git show HEAD 在git中,目前提交被称为HEAD提交,输入上述命令可以查看当前提交所有文件的修改内容. 2.撤销更改: git checkout HEAD fil ...

  8. JAVA基础知识总结：六

    一.不定长参数 1.语法:数据类型... 变量名称 使用注意事项:a.不定长参数就相当于是一个数组 b.不定长参数只能出现在参数列表的最后面 c.一个函数的参数列表中只能出现一次不定长参数 d.对于不 ...

  9. MongoDB查询分析

    MongoDB 查询分析可以确保我们建立的索引是否有效,是查询语句性能分析的重要工具.MongoDB 查询分析常用函数有:explain() 和 hint(). 1. explain(): 提供查询信 ...

  10. LeetCode 101. Symmetric Tree （对称树）

    Given a binary tree, check whether it is a mirror of itself (ie, symmetric around its center). For e ...